威斯尼斯人官网学习Angularjs分页指令_AngularJS_脚本之家

2.分页样式控制
建议写在单独的.css文件中,首先新建pageSync.css文件,以下是具体样式

{{row.args2}}

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

3.分页查询方法
我在factory中自定义了分页查询的方法,共用,方便代码的维护。在angular中与后台的交互默认是异步的,我这里写成同步查询了,首先定义js文件pageSync.service.js,以下是factory的全部内容:

1.指令定义
定义一个js文件,page-directive.js,用来写分页的指令代码,这个文件中包含了分页的模板,以下是js文件中的所有代码:

列名2

修改

'use strict'; { angular.module('template/pageInit/pageInit.html', []).run([ '$templateCache',function { $templateCache.put('template/pageInit/pageInit.html', '

在分页查询之前要做一些准备工作:

首先要引用factory,将PageSync在controller中引用,如下:

序号

没有数据!

在项目中许多页面都用到了分页,然后每个页面都有许多重复的分页代码,于是自己写了一份简易的分页指令,简化页面的代码,且容易维护,写在博客中当做备份,方便以后查阅。
以下是定义指令及其应用的步骤:

angular.module.controller(‘MyCtrl’, function;

n’+ ” ); } ]); angular.module(‘pageInit’,
[‘template/pageInit/pageInit.html’]威斯尼斯人官网 ,)
.directive(‘pageInit’,[‘pageinitTemplate’, function { return { restrict
: ‘AE’, templateUrl: function { return tAttrs.templateUrl ||
pageinitTemplate.getPath(); }, replace : true, scope : { pageData : ‘=’,
prev : ‘&’, next : ‘&’, loadPage : ‘&’ }, link : function(scope,
element, attrs) { scope.on_prev = function { scope.prev(); } };
scope.on_next = function { scope.next(); } }; scope.on_loadPage =
function { scope.inpage = undefined; if { scope.loadPage; } }; } }; }])
.provider(‘pageinitTemplate’, function () { var templatePath =
‘template/pageInit/pageInit.html’; this.setPath = function {
templatePath = path; }; this.$get = function () { return { getPath:
function () { return templatePath; } }; }; });}).call;

// 分页查询$scope.load = function { $scope.surgeonPageData.rowCollectionPage = Common.setPageRow; $scope.noSurgeonData = false; $scope.surgeonPageData.loadTime = 'before'; PageSync.load(url, $scope.pageData.currentPage, $scope.pageSize).then { $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 { $scope.pageData = data; }); }};// 上一页$scope.prev = function() { if ($scope.pageData.currentPage > 1) { PageSync.prev(url, $scope.pageData.currentPage, $scope.pageSize).then { $scope.pageData = data; }); }};// 点击页码跳转$scope.loadPage = function { $scope.inpage = undefined; var intPage; if (typeof page == 'string') { if { intPage = parseInt; } 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 { $scope.pageData = data; }); }};

{{!!row.id ? $index+1+(pageData.currentPage-1)*pageSize : ”}}

.pagination-main { display: inline-block; padding-left: 0; margin: 0 0; border-radius: 4px; vertical-align: middle;}.pagination-main li.prev-page > a { border: 0;}.pagination-main li.next-page > a { border: 0; border-left: 1px; margin-left: 0;}.pagination-main li.first-page > a { border-top-left-radius: 0; border-bottom-left-radius: 0;}.pagination-main li.last-page > a { border-top-right-radius: 0; border-bottom-right-radius: 0;}.pagination-main li div { width: 80px;border: 1px solid #DDDDDD;background-color: #ffffff;float: left;padding: 0;}.pagination-main li.skip-page input[type='text'] { width: 24px;height: 20px;border: 0;text-align: center;}.pagination-main li.skip-page input[type='button'] { padding: 0 4px 1px 10px;border: 0;border-left: 1px solid #dddddd;background-color: #ffffff}.pagination-main li.data-num > a { border: 0; margin-left: 0;}.pagination-main > li { display: inline;}.pagination-main > li:first-child > a,.pagination-main > li:first-child > span { /*margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;*/}.pagination-main > .active > a,.pagination-main > .active > span,.pagination-main > .active > a:hover,.pagination-main > .active > span:hover,.pagination-main > .active > a:focus,.pagination-main > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca;}.pagination-main > li > a,.pagination-main > li > span { position: relative; float: left; /*padding: 6px 12px;*/ padding: 1px 8px; margin-left: -1px; line-height: 1.42857143; color: #428bca; text-decoration: none; background-color: #fff; border: 1px solid #ddd;}.pagination-main > .disabled > span,.pagination-main > .disabled > span:hover,.pagination-main > .disabled > span:focus,.pagination-main > .disabled > a,.pagination-main > .disabled > a:hover,.pagination-main > .disabled > a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd;}

然后再controller中写如下的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2).controller中的代码

操作

'use strict';angular.module.factory('PageSync', ['$http', '$q', function Page { var rowCollectionPage = []; var totalPage = 1; var pages = []; var endPage = 1; var load = function(url, currentPage, pageSize,deferred) { var json = {rowCollectionPage: [], totalPage: 1, currentPage:currentPage ? currentPage:1, pages: []}; $http.get.success { rowCollectionPage = setPageRow; // 获取总页数 totalPage = Math.ceil(rows.count / pageSize); endPage = totalPage; // 生成数字链接 if  { pages = getPagesLow; } else { pages = getPagesHigh(currentPage, totalPage); } json.rowCollectionPage = rowCollectionPage; json.totalPage = totalPage==0 ? 1 : totalPage; json.currentPage = currentPage; json.pages = pages; json.count = rows.count; json.pageSize = pageSize; /** * 自定义字段,初始化的时候为before,只要经过该分页方法,则字段值变为after * before表示未经过该分页方法,after表示经过该分页方法, * 前台页面加载的规则:为before时表示表格无数据,为after且pataData.count==0时无数据,否则视为有数据, * 也可以说是记录的一个时间状态 */ json.loadTime = 'after'; deferred.resolve; return deferred.promise; }; // 总页数小于等于7时 显示所有的页数 var getPagesLow = function { var temp = []; for (var i=1; i4.使用指令1).页面上的代码:我的代码中分页是写在table中的tfoot里面了,prev、loadPage均为在页面对应的controller中定义的方法
  • n’+ ‘ n’+ ‘
  • n’+ ‘ n’+ ‘
  • n’+ ‘ {{ page }}n’+ ‘ {{ page
    }}n’+ ‘
  • n’+ ‘ n’+ ‘
  • n’+ ‘

    威斯尼斯人官网学习Angularjs分页指令_AngularJS_脚本之家。n’+ ‘

  • 共{{pageData.count}}条

//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);

列名1

{{row.args1}}

发表评论

电子邮件地址不会被公开。 必填项已用*标注