ng-table pagination, sorting and filter not working

Question

I am trying to use ngTable but its not working as expected. I've implemented pagination, sorting and filter

Here is a plunker i have created.

I have done same way as specified in the docs examples. The pagination, sorting and filter are not working.

I tried to debug but i am not getting any error messages also

Circumstantial

#26307498 please have a look here first you need to apply ng-repeat directive to $data variable ,like <tr ng-repeat="g in $data"> – Highcolored

I have updated the plunker with $filter.Still the same issue – Circumstantial

right,filter still not working,let me figure out a little bit – Highcolored

you not update repeat in $data – Highcolored

does it have to be $data only? The variable name i have used is tabledata. I am using $tabledata in the view – Circumstantial

Unfortunately only $data ,otherwise it will be strange behavior,but that's not big deal,cause you can put all data access logic for tabledata inside getData function – Highcolored

you can bind $tabledata for view needing after ngtable resolving – Highcolored

Answer 1

first inject $filter in controller

controller('DemoCtrl', function($scope, $filter, ngTableParams) {

second, you need to apply ng-repeat to $data variable like this <tr ng-repeat="g in $data">

Update

here working plunk, with all edits above, and angular 1.2.26 and ngtable 0.3.1

Update2

you can bind $scope.tabledata if your view is needed,after data retrieving in getData function

getData: function($defer, params) {
                    // use build-in angular filter
                     filteredData = params.filter() ?
                      $filter('filter')(tabledata, params.filter()) :
                         tabledata;
                 
                    var orderedData = params.sorting() ?
                                        $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
                    var page=orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    $scope.tabledata=page;
                    $defer.resolve(page);
                }

Highcolored

thanks to @Sebastian stackoverflow.com/users/3111930/sebastian for formatting – Highcolored

You're welcome. You should use the editor functions for adding links (the globe with the green arrow to the right) :-). – Diploma

Answer 2

I'm using a later version of ng-table but was having similar problems. Apparently you need to add show-filter="true" to the table tag. I didn't see this in the documentation/examples for ng-table but found it in the source code tests.

My Angular Version : 1.2.16
My ng-Table Version : 0.8.3

also tried it with

Angular Version : 1.2.28
ng-Table Version : 0.4.3

HTML

<div class="row">
<div class="col-lg-12">
    <table ng-table="tableParams" show-filter="true" class="table table-condensed table-bordered table-striped">
        <tr ng-repeat="candidate in $data">
            <td data-title="'First Name'" filter="{firstName : 'text'}">{{candidate.firstName}}</td>
            <td data-title="'Last Name'"  filter="{lastName  : 'text'}">{{candidate.lastName}}</
        </tr>
    </table>
</div>

JS Controller

controller: function ($scope, Candidates, NgTableParams) {
            var tableParams = {
                count : 15
            };
            var tableSettings = {

            };
            Candidates.getCandidates().then(function (res) {
                tableSettings.data = res.data._embedded.candidates;
                $scope.tableParams = new NgTableParams(tableParams, tableSettings);
            });
        }

Origami