angular的tm-pagination分页插件一个页面使用多个分页的问题

最新推荐文章于 2024-06-11 09:58:56 发布

阿泽努力变瘦变美丽

最新推荐文章于 2024-06-11 09:58:56 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/gongze_yan/article/details/84326074

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Angular项目中使用tm-pagination分页插件时遇到的问题及其解决方案。内容包括分页的基础使用，如currentPage和itemsPerPage参数设置，以及在同一个页面中使用多个分页的配置方法。特别指出，插件每次分页操作都会向后台发送请求，并非一次性加载所有数据。此外，还讨论了监控currentPage和itemsPerPage变化时如何避免触发多次后台事件，以及解决每页显示数量选项不显示的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多分页插件在一个页面中使用多个的时候都会出现一些问题（据说的，我还没有什么经验），当然我在使用tm-pagination的时候也没有跳过这个坑，先上个pagination最基础的使用。其中有几点需要注意的地方

1.插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。

注：在一般使用情况下（即一个页面中只需要一个分页）只需要定义好这两个参数就可以正常使用，如下：

$scope.paginationConf = {
    currentPage: 1,
    itemsPerPage: 20
}

2.这个插件在使用时每次发生点击和变化时都会向后台发送一次请求，并不是一次请求所有数据后分页加载（这个问题我不知道被百度上的哪篇文章误导了，从一开始查问题就笃定地认为是前台的问题，直到leader告诉我后台也需要改动）。

3.当页码和页面记录数发生变化时监控后台查询，如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。

$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);

由于项目保密啥玩意乱七八糟的问题，我也粘不出来，盗用一下别人的代码

<div ng-app="DemoApp" ng-controller="DemoController">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>ID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Status</td>
                <td>Address</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="emp in persons">
                <td>{{emp.ID}}</td>
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Status}}</td>
                <td>{{emp.Address}}</td>
            </tr>
        </tbody>
    </table>
    <tm-pagination conf="paginationConf"></tm-pagination>
</div>
<script type="text/javascript">
    var app = angular.module('DemoApp', ['tm.pagination']);
 
    app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
 
        var GetAllEmployee = function () {
 
            var postData = {
                pageIndex: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            }
            BusinessService.list(postData).success(function (response) {
                $scope.paginationConf.totalItems = response.count;
                $scope.persons = response.items;
            });
 
        }
 
        //配置分页基本参数
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 5
        };
 
        /***************************************************************
        当页码和页面记录数发生变化时监控后台查询
        如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
        ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }]);

到此，我们已经实现了一个页面中的分页功能，很好。

接下来就是一个页面中使用多个分页功能：需要把<tm-pagination conf="paginationConf"></tm-pagination>中conf的名字改变一下，然后就是有一些东西可能会显示不出来，把下面的一些参数单独地定义一下，但有一些属性可能反而会影响到插件显示不出来，具体需要哪个就加上试一下吧，我遇到的问题是“每页显示多少行”的参数显示不出来没救只加个perPageOptions就好。

$scope.paginationConf = {
    currentPage: $location.search().currentPage ? $location.search().currentPage : 1,
    totalItems: 8000,
    itemsPerPage: 15,
    pagesLength: 15,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function(){
        console.log($scope.paginationConf.currentPage);
        $location.search('currentPage', $scope.paginationConf.currentPage);
    }
};