angularjs：pagination插件实现分页

第一种方式：HTML+JS

如图：

HTML

<pager total-count="vm.pageOption.totalItems"
                                   page-size="vm.requestParams.maxResultCount"
                                   skip-count="vm.requestParams.skipCount"
                                   page-changed="vm.getGridData()"></pager>

JS

//获取列表请求参数
            vm.requestParams = {
                //filter: '',
                skipCount: 0,
                maxResultCount: app.consts.grid.defaultPageSize,
                sorting: null,
                
            };


//表格配置
            vm.gridOptions = {
                paginationPageSizes: app.consts.grid.defaultPageSizes,
                paginationPageSize: app.consts.grid.defaultPageSize,
                useExternalPagination: true,//是否分页
                appScopeProvider: vm,
                minRowsToShow: 1,
                //列配置
                columnDefs: [],
                onRegisterApi: function (gridApi) {
                    $scope.gridApi = gridApi;
                    //排序事件
                    gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                        if (!sortColumns.length || !sortColumns[0].field) {
                            vm.requestParams.sorting = null;
                        } else {
                            vm.requestParams.sorting = sortColumns[0].field + ' ' + sortColumns[0].sort.direction;
                        }

                        vm.getGridData();
                    });
                    //翻页事件
                    gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) {
                        vm.requestParams.skipCount = (pageNumber - 1) * pageSize;
                        vm.requestParams.maxResultCount = pageSize;

                        vm.getGridData();
                    });
                }
                ,
                data: []
            };

//查询
        vm.getGridData = function () {
            vm.loading = true;
            var s = entityService.getAll(vm.requestParams).then(function (result) {
                vm.pageOption.totalItems = result.data.totalCount;
                vm.gridOptions.data = result.data.items;
            }).finally(function () {
                vm.loading = false;
            });
        };

        //获取数据
        vm.getGridData();

第二种方式：JS

如图：

JS 

//获取列表请求参数
            vm.requestParams = {
                //filter: '',
                skipCount: 0,
                maxResultCount: app.consts.grid.defaultPageSize,
                sorting: null
            };

 //表格配置
            vm.gridOptions = {
                paginationPageSizes: app.consts.grid.defaultPageSizes,
                paginationPageSize: app.consts.grid.defaultPageSize,
                useExternalPagination: true,//是否分页
                appScopeProvider: vm,
                paginationCurrentPage: 1, //当前页码
                minRowsToShow: 11,
                //列配置
                columnDefs: [
                    {
                        name: '编号',
                        field: 'code',
                        width: 160
                    },
                    
                    {
                        name: '姓名',
                        field: 'realName',
                        minWidth: 120
                    },
                    {
                        name: '身份证号',
                        field: 'payerIdentityCard',
                        minWidth: 170
                    },
                    {
                        name: '时间',
                        field: 'refundmentTime',
                        cellFilter: 'momentFormat: \'L\'',
                        width: 100
                    },
                    
                ]
                ,
                onRegisterApi: function (gridApi) {
                    $scope.gridApi = gridApi;
                    //排序事件
                    gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                        if (!sortColumns.length || !sortColumns[0].field) {
                            vm.requestParams.sorting = null;
                        } else {
                            vm.requestParams.sorting = sortColumns[0].field + ' ' + sortColumns[0].sort.direction;
                        }

                        vm.getGridData();
                    });
                    //翻页事件
                    gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) {
                        vm.requestParams.skipCount = (pageNumber - 1) * pageSize;
                        vm.requestParams.maxResultCount = pageSize;

                        vm.getGridData();
                    });
                },
                data: []
            };


//查询
            vm.getGridData = function () {
                vm.loading = true;
                var s = entityService.getAll(vm.requestParams).then(function (result) {
                    vm.gridOptions.totalItems = result.data.totalCount;
                    vm.gridOptions.data = result.data.items;
                    console.log(vm.gridOptions.data);
                }).finally(function () {
                    vm.loading = false;
                });
            };

            //获取数据
            vm.getGridData();