angularjs – 从后端获取数据时,分页控件未显示在ng表中

前端之家收集整理的这篇文章主要介绍了angularjs – 从后端获取数据时,分页控件未显示在ng表中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我从后端获取数据列表,并使用ng-table进行显示.问题是它没有显示分页控件.以前,当我使用虚拟数据显示ng表时,分页工作完全正常.有人可以帮我吗?

这是我的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',{
                title: 'User Karma',field: 'userkarma',{
                title: 'Date Joined',field: 'datejoined',{
                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()));
                }
            });
这是因为在异步数据加载后用于刷新数据的通常的$scope.tableParams.reload()函数不会刷新表中的总项数.以前没有发生过,因为当您使用虚拟数据时,该值在开始时被正确设置.

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

原文链接:https://www.f2er.com/angularjs/140796.html

猜你在找的Angularjs相关文章