学习Angularjs分页指令(3)

//pageData中设置分页数据集合、总页数、页码集合、数据总数,loadTime为自定义的参数,用来记录时间状态(访问数据前及返回数据后)
$scope.pageData = {rowCollectionPage: [], totalPage: 1, currentPage:1, pages: [],count: 0, loadTime: 'before'};
// 这里用来计算table的高度,根据实际情况来。
$scope.tabHeight = $scope.height-48-37-10-42-5;
// 计算实际中一页有多少行数据
$scope.pageSize = parseInt(($scope.tabHeight-15-34-34-39)/34);

然后再controller中写如下的方法

// 分页查询 $scope.load = function(row) { $scope.surgeonPageData.rowCollectionPage = Common.setPageRow([],$scope.pageSize); $scope.noSurgeonData = false; $scope.surgeonPageData.loadTime = 'before'; PageSync.load(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) { $scope.pageData = data; if(($scope.pageData.loadTime=='after'&& $scope.pageData.count==0) || $scope.pageData.loadTime=='before') { $scope.noTableData = true; } }); }; // 下一页 $scope.next = function() { if ($scope.pageData.currentPage < $scope.pageData.totalPage) { PageSync.next(url, $scope.pageData.currentPage, $scope.pageSize).then(function(data) { $scope.pageData = data; }); } }; // 上一页 $scope.prev = function() { if ($scope.pageData.currentPage > 1) { PageSync.prev(url, $scope.pageData.currentPage, $scope.pageSize).then(function (data) { $scope.pageData = data; }); } }; // 点击页码跳转 $scope.loadPage = function(page) { $scope.inpage = undefined; var intPage; if (typeof page == 'string') { if(page!="") { intPage = parseInt(page, 10); } else { intPage = 0; } } else { intPage = page; } if ($scope.pageData.totalPage <= 1) { } else if (intPage == undefined || intPage == null) { alert('请填写跳转页码!'); } else if(intPage <= 0 || intPage > $scope.pageData.totalPage) { alert('跳转页码应大于0,小于总页数'+$scope.pageData.totalPage); } else if ($scope.pageData.currentPage != page) { PageSync.loadPage(url, $scope.pageData.currentPage, $scope.pageSize, page).then(function (data) { $scope.pageData = data; }); } };

5.结果
最终的实现效果如下图:

学习Angularjs分页指令

学习Angularjs分页指令

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsgjx.html