How to iterate over filtered rows in Angular datatable

Question

Lets say, I have simple datatable

            <table datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                </thead>
                <tbody>
                    <tr ng-repeat"reservation in reservations">
                        <td>{{reservation.ID}}</td><td>{{reservation.name}}</td>
                    </tr>
                </tbody>
            </table>

When I put some string into search box datatable is being filtered. Now I want to iterate in Angular over filtered rows and read IDs to array. How to deal with it in Angular? I can use jquery but I do not want make a mess in code.

So you want a search box(as a filter), that will show the filtered ID's(based on the search box's text) ? — Rohan Kangale
– Rohan Kangale, Commented Dec 7, 2016 at 10:43
datatable library already has a filter box. I want to get filtered IDs — Michal Bialek
– Michal Bialek, Commented Dec 7, 2016 at 11:33

Exzile · Accepted Answer · 2017-02-17 16:51:17Z

  $scope.addressDTInstance = {};
    var j = $scope.addressDTInstance.DataTable.rows();

  <table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">

This is something to get you on your way. Need an instance of dtInstance which you don't have. So add dt-instance='dtInstance' in the html table tag. Then initiate it at the top of your controller, $scope.dtInstance = {};. Perform a click or some action in your javascript that you can set a break point on and then examine your $scope.dtInstance to see what all properties and methods you have. As you see in my snippet I'm accessing DataTable.Rows of my dtInstance. If you need better example or help let leave me a comment and I'll revise.

UPDATE Here is a method I found that works. I am ofcourse using the DTOptionsbuilder. This will get called twice, first when it is created and second when i populated the array variable that is populating my table. I just check to see if rows exist and that the first one isn't 'No results'.

 $scope.addressdtOptions = DTOptionsBuilder.newOptions()
                   .withOption('bFilter', false)
                   .withOption('bInfo', false)
                   .withOption('paging', false)
                   .withOption('processing', true)
                   .withOption('aaSorting', [1, 'asc'])
                   .withOption('language', { zeroRecords: 'No results' })
                   .withOption('initComplete', function () {
                       var rows = $("#addressSelectionTable > tbody > tr");
                       if (rows.length > 0 && rows[0].innerText !== "No results") {
                           var x = 3;
                       }

                   });

Here i am setting that variable that is ng-repeat for table. You may not be doing it my way, but you should be able to figure it out for your way.

 $.when($OfficerService.GetAddressSelections($scope.officer.EntityID, $scope.officer.EntityTypeID, $scope.officer.MemberID)).then(function (result) {
                        $scope.addresses = result.data;
                        $scope.$applyAsync();
                    });

<table id="addressSelectionTable" class="table table-condensed table-bordered" datatable="ng" dt-options="addressdtOptions" dt-column-defs="addressdtColumnDefs" dt-instance="addressDTInstance">
                <thead>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip</th>
                        <th>Country</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="a in addresses">
                        <td class="centerColumn">
                            <input type="button" class="btn btn-primary" value="Select" ng-click="selectAddress(a.AddressID,a.AddressLocationCode,$event)" />
                        </td>
                        <td>
                            <span ng-if="a.AddressLocationCode == 'E'">Office</span>
                            <span ng-if="a.AddressLocationCode == 'M'">Member</span>
                        </td>
                        <td>
                            {{a.AddressLine1}}
                            <span ng-if="a.AddressLine2 != null"><br /> {{a.AddressLine2}}</span>
                        </td>
                        <td>{{a.City}}</td>
                        <td>{{a.StateCode}}</td>
                        <td>{{a.Zip}}</td>
                        <td>{{a.CountryCode}}</td>
                        <td>{{a.AddressID}}</td>
                    </tr>
                </tbody>
            </table>

rafwell · Accepted Answer · 2019-12-20 17:09:07Z

2

For me it works: $scope.dtInstance.DataTable.rows( { search: 'applied' } ).data()

answered Dec 20, 2019 at 17:09

rafwell

4991 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to iterate over filtered rows in Angular datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related