从后端获取数据时，分页控件未显示在 ng-table 中答案

【问题标题】：Pagination controls not showing up in ng-table when fetching data from backend从后端获取数据时，分页控件未显示在 ng-table 中
【发布时间】：2018-12-06 17:34:32
【问题描述】：

我正在从后端获取数据列表并使用 ng-table 显示它。问题是它没有显示分页控件。以前，当我使用虚拟数据来显示 ng-table 时，分页工作得很好。有人可以帮我吗？

这是我的 HTML：

<table ng-table="tableParams" show-filter="true" class="table">
            <thead>
                    <tr>
                            <th ng-repeat="column in columns" ng-show="column.visible"
                                    class="text-center" ng-class="{
                                    'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                                    'sort-desc': tableParams.isSortBy(column.field, 'desc'),
                                    'sortable': !$first
                                    }"
                                    ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                                    <div>{{column.title}}</div>
                            </th>
                    </tr>

            </thead>
            <tr ng-repeat="user in data | filter:searchText">

                    <td width="30" style="text-align: left">
                            <input type="checkbox" ng-model="checkboxes.items[user.id]" />
                    </td>

                    <td data-title="'Email Id'" class="text-center" sortable="email" ng-show="columns[1].visible">
                            <span>{{user.email}}</span>
                    </td>
                    <td data-title="'User Karma'" class="text-center" sortable="userkarma" ng-show="columns[2].visible">
                            <span>{{user.userkarma}}</span>
                    </td>
                    <td data-title="'Date Joined'" class="text-center" sortable="datejoined" ng-show="columns[3].visible">
                            <span>{{user.datejoined}}</span>
                    </td>
                    <td data-title="'Unsubscribed'" class="text-center" sortable="status" ng-show="columns[4].visible">
                            <span>{{user.unsubscribed}}</span>
                    </td>
            </tr>
        </table>

下面是我的js文件：

for (var i = 0; i < UserList.getUsers()
            .length; i++) {
            $scope.data.push({
                id: UserList.getUsers()[i]._id,
                email: UserList.getUsers()[i].email,
                userkarma: UserList.getUsers()[i].healthScore,
                datejoined: moment(UserList.getUsers()[i].firstSessionAt)
                    .format("MMMM Do YYYY"),
                unsubscribed: UserList.getUsers()[i].unsubscribed
            })
        };
        $scope.columns = [{
                title: '',
                field: 'checkbox',
                visible: true
            },
            {
                title: 'Email',
                field: 'email',
                visible: true
            }, {
                title: 'User Karma',
                field: 'userkarma',
                visible: true
            }, {
                title: 'Date Joined',
                field: 'datejoined',
                visible: true
            }, {
                title: 'Unsubscribed',
                field: 'unsubscribed',
                visible: true
            }
        ];

        $scope.tableParams = new ngTableParams({
            page: 1, 
                count: 10, // count per page
                filter: {
                    name: 'M' // initial filter
                },
                sorting: {
                    name: 'asc'
                }
            }, {
                total: $scope.data.length, // length of data
                getData: function ($defer, params) {
                    // use build-in angular filter
                    var filteredData = params.filter() ?
                        $filter('filter')($scope.data, params
                            .filter()) :
                        data;
                    var orderedData = params.sorting() ?
                        $filter('orderBy')($scope.data,
                            params.orderBy()) :
                        $scope.data;
                    params.total(orderedData.length); // set total for recalc paginationemail

                    $defer.resolve(orderedData.slice((
                            params.page() -
                            1) * params.count(),
                        params.page() *
                        params.count()));
                }
            });

【问题讨论】：

显示你认为相关的代码和HTML，人们会更容易提供帮助。指定您使用的版本也很好。
感谢您的建议！！我已经粘贴了相关的 HTML 和 JS 文件以供进一步参考。

标签： angularjs pagination ngtable

【解决方案1】：

发生这种情况是因为用于在异步数据加载后刷新数据的常用 $scope.tableParams.reload() 函数不会刷新表中的总项目数。以前没有发生过，因为在您使用虚拟数据时，该值在开始时已正确设置。

需要添加params.total(data.length);getData函数手动刷新值。

【讨论】：

这让我走到了那一步，但对于其他有这个问题的人，我还必须在它显示之前从我的表中删除 'ng-table' 类！谢谢

【解决方案2】：

对我来说，这是因为我使用的是 coffeescript，它会自动返回函数中最后一件事的值。这会导致问题，因为 ng-table 的 getData() 得到了一个承诺，如果它没有得到一个，它会自己创建一个，从 $defer。通过使用咖啡脚本而不是完全正确地转换来自Configuring your table with ngTableParams wiki page 的示例，我返回了一些不是承诺的东西。

在 coffeescript 中，确保您对 getData() 的回调以任一结尾

$defer.promise

或

return

这样 ng-table 会得到一个承诺，或者知道自己做一个。

【讨论】：

【解决方案3】：

我找到了答案。实际上加载动态数据时 ng-table 存在问题。动态加载数据时，不会调用 getData 函数。所以这就是我所做的。我创建了一个 refreshTable 函数来调用 setTable 函数，然后调用 getData 函数并呈现表格。

$scope.refreshTable = function () {
            console.log('\n\n refreshing table')
            $scope['tableParams'] = {
                reload: function () {},
                settings: function () {
                    return {}
                }
            };
            $timeout(setTable, 100)
        };
        $scope.refreshTable();

        function setTable(arguments) {

            $scope.tableParams = new ngTableParams({
                page: 1, // show first page
                count: 10, // count per page
                filter: {
                    name: '' // initial filter
                },
                sorting: {
                    name: 'asc'
                }
            }, {
                filterSwitch: true,
                total: $scope.users.length, // length of data
                getData: function ($defer, params) {
                    console.log(
                        '\n\nngTable getData called now')
                    var orderedData = params.sorting() ?
                        $filter('orderBy')($scope.users,
                            params.orderBy()) :
                        data;
                    params.total(orderedData.length);
                    $defer.resolve(orderedData.slice((params.page() -
                            1) * params.count(), params.page() *
                        params.count()));
                }
            });
        }

【讨论】：

对于未来的用户，最好将刷新作为成功回调的一部分。

【解决方案4】：

我遇到了这个问题并应用了这里提供的解决方案，但它没有解决我的问题。我的用法如下

    <table ng-table="tableParams" class="table  ng-table table-striped"  show-filter="{{::showFilter}}">
        <tr ng-show="showHeaders">
            <th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
        </tr>
        <tr ng-repeat="row in $data">
            <td ng-repeat="column in columns"  ng-show="column.visible" sortable="column.field" ng-click="save(row)">
                {{row[column.field][column.subfield] || row[column.field]}}
                <span compile="column.getValue()" ></span>
            </td>
        </tr>
    </table>

经过一天的努力，我了解到问题在于使用 css 类 "ng-table" 。我提到这一点是为了节省您的时间，所以除了添加

params.total(data.length)

你也应该检查你的css，工作代码是：

    <table ng-table="tableParams" class="table   table-striped"  show-filter="{{::showFilter}}">
        <tr ng-show="showHeaders">
            <th class="th-select" ng-repeat="column in columns">{{column.title}}</th>
        </tr>
        <tr ng-repeat="row in $data">
            <td ng-repeat="column in columns"  ng-show="column.visible" sortable="column.field" ng-click="save(row)">
                {{row[column.field][column.subfield] || row[column.field]}}
                <span compile="column.getValue()" ></span>
            </td>
        </tr>
    </table>

【讨论】：

【解决方案5】：

我对 loadData + 异步加载有相同的体验。在我这边，问题是 API 返回的数据是一个由 2 个其他数组组成的数组，同时我只为我的表使用了 2 个数组中的 1 个。见下文：

*.js

return $http(options).then(function (resp) {
        params.total(resp.data.users.length)
        return resp.data
    }

*.html

 <tr ng-repeat="row in usrCtrl.servicesTable.data.users" ng-if="row.Services.hasOwnProperty(usrCtrl.selectedService)">

通过在 javascript 端返回“resp.data.users”并在 html 端正确循环“usrCtrl.servicesTable.data”然后寻呼机出现！

洛伊克

【讨论】：