ng-table pagination, sorting and filter not workin

问题:

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

回答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);
                }

回答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);
            });
        }