AngularJS ngTable分頁不起作用，將所有數據顯示在一頁上

Question

我正在使用ngTables以表格格式加載數據並顯示分頁。 我的數據是從Firebase數據庫加載的，當前長度為9。所以我想在每頁顯示三行。

這是下面的代碼，當頁面被加載時，所有九行都被加載到第一頁，而我將計數設置為3，並且當我單擊頁面時，它也不會繼續前進。

這樣做還有另一個問題，過濾也不起作用。

這是我的ng-table在HTML視圖中不變，並且：

<div ng-controller="mycontroller">
    <strong>Filter:</strong> {{tableParams.filter()|json}}
        <table ng-table="tableParams" show-filter="true" class="table table-striped">
            <tr ng-repeat="obj in mylist">
                <td data-title="'Department'" filter="{ 'name': 'text' }">{{ obj.department }}</td>
                <td data-title="'Lastname'" >{{ obj.lastname }}</td>
                <td data-title="'City'">{{ obj.city }}</td>
            </tr>
        </table>
</div>

和mycontroller.js ：

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
    function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

        //get all data from firebase database
        var mydb = DatabaseRef.ref("projects").orderByKey();
        $scope.mylist = $firebaseArray(mydb);

        var data = $scope.mylist;
        data.$loaded().then(function(data) {
            console.log(data.length); // data is loaded here, and the length is 9
            $scope.tableParams = new ngTableParams({
                page: 1, // show first page
                count: 3, // count per page
                filter: {
                    name: '' // initial filter
                }
            }, {
                total: data.length, // length of data
                getData: function ($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
                    $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    params.total(orderedData.length);
                    // set total for recalc pagination
                    $defer.resolve($scope.users);
                }
            });
        });
    }]);

Answer 1

• page參數是額外的，因為默認情況下還是1。
• filter是多余的，因為默認情況下它為空。
• total是額外的，因為默認情況下它將自動獲取數據集的長度
• getData是額外的。 您不需要自定義過濾。 ngTable進行過濾

我建議替換此代碼

console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
    page: 1, // show first page
    count: 3, // count per page
    filter: {
        name: '' // initial filter
    }
}, {
    total: data.length, // length of data
    getData: function ($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
        $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
        params.total(orderedData.length);
        // set total for recalc pagination
        $defer.resolve($scope.users);
    }
});

到這個。

console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
    count: 3, // count per page
}, {
    dataset: data
});

然后在HTML中將此ng-repeat="obj in mylist"更改為此ng-repeat="obj in mylist" ng-repeat="obj in $data"

Answer 2

這是有效的解決方案：

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
    function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

        //get all data from firebase database
        var mydb = DatabaseRef.ref("projects").orderByKey();
        $scope.mylist = $firebaseArray(mydb);

        var data = $scope.mylist;
        data.$loaded().then(function(data) {
            console.log(data.length); // data is loaded here, and the length is 9
            $scope.tableParams = new ngTableParams({
                page: 1, // show first page
                count: 3, // count per page
                filter: {
                    name: '' // initial filter
                },
                sorting: { city: "asc" }
            }, {
            filterSwitch: true,
            total: 0, //data.length, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                var filteredData = params.filter() ?
                    $filter('filter')(data, params.filter()) :
                    $scope.mylist;

                var orderedData = params.sorting() ?
                    $filter('orderBy')(filteredData, params.orderBy()) : filteredData;

                params.total($scope.mylist.length);
                // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));


                }
            });
        });
    }]);

Answer 3

這是一個有關如何使用ngTable添加分頁的簡單示例。

顯然，請確保添加對angularjs的引用。

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

添加對ngTable javascript和CSS的引用。

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>

創建ngApp ，在視圖內創建表。

更新：

<strong>Filter:</strong> {{tableParams.filter()|json}}
<table ng-table="tableParams" show-filter="true" class="table table-striped">
    <tr ng-repeat="obj in myList">
        <td data-title="'Department'" filter="{ department: 'text' }" sortable="'department'">{{ obj.department }}</td>
        <td data-title="'Lastname'" >{{ obj.lastname }}</td>
        <td data-title="'City'">{{ obj.city }}</td>
    </tr>
</table>

在您的控制器上，從data.$loaded()刪除$scope.tableParams並直接使用$scope.myList 。

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

    //get all data from firebase database
    var mydb = DatabaseRef.ref("projects").orderByKey();
    $scope.mylist = $firebaseArray(mydb);

    $scope.mylist.$loaded().then(function(data) {
        console.log(data.length); // data is loaded here, and the length is 9
        $scope.arrayLength = data.length;
    });

    $scope.tableParams = new ngTableParams({
            page: 1, // show first page
            count: 3, // count per page
            filter: {
                department: '' // initial filter
            }
        }, {
            total: $scope.arrayLength, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                $scope.mylist = $defer.resolve(params.filter() ? $filter('filter')($scope.mylist, params.filter()) : $scope.mylist);
                $scope.users = $scope.mylist.slice((params.page() - 1) * params.count(), params.page() * params.count());
                // set total for recalc pagination
                params.total($scope.mylist.length);                    
            }
    });
}]);