angular 分页插件的使用

html:

<pagination 
total-items="totalItems" 
ng-model="currentPage" 
items-per-page="itemPerPage" 
previous-text="上一页" 
next-text="下一页" 
page-sizes="pageSizes" 
edit-page="editPage" 
ng-change="getData(currentPage,itemPerPage)">  //获取数据的方法
</pagination>

js:数据取多次每次翻页都重新取数据

        // 分页:数据取多次 每次翻页都重新取数据

        $scope.currentPage = ;

        $scope.itemPerPage = ;

        $scope.pageSizes = [,, , , ];

        $scope.editPage = true;

        $scope.progressing=false;

        $scope.getData = function (currentPage, itemPerPage) {

            if($scope.currentPage>&&!$scope.progressing) {

                var params = {

                    'pageIndex': $scope.currentPage-,

                    'pageSize': $scope.itemPerPage,

                    'insuranceOrgCode': $scope.insuranceOrgCode,//接口参数
                };

                $scope.progressing=true;

                $http.post('/product/getProductList.do', angular.toJson(params)).success(function (res) {

                    $scope.dataList = res.data.listObj;//接口取值后，赋值于变量

                    $scope.totalItems = res.data.total;

                    $scope.pageCount = Math.ceil($scope.totalItems / itemPerPage);

                    $scope.progressing=false;

                })

            }

        };

        $scope.getData();//页面进来，默认查询

js:分页情况:数据只取一次

// 分页情况:数据只取一次

        ($scope.getData = function (currentPage, itemPerPage) {

            if (angular.isUndefined($scope.dataList)) {

                var params = {

                    'pageIndex': currentPage,

                    'pageSize': itemPerPage,

                    'insuranceOrgCode': $scope.insuranceOrgCode,

                    'prodType': $scope.prodType,

                    'productName': $scope.productName,

                };

                $http.post('/product/getProductList.do', params).success(function (res) {

                    $scope.dataList = res.data.listObj;

                    $scope.totalItems = ($scope.dataListStore = res.data.listObj).length;

                    $scope.pageCount = Math.ceil($scope.totalItems / itemPerPage);

                    $scope.getData(currentPage, itemPerPage)

                })

            } else {

                var start = itemPerPage * (currentPage - );

                var end = ($scope.totalItems < itemPerPage * currentPage) ? $scope.totalItems : itemPerPage * currentPage;

                $scope.dataList = ($scope.dataListStore.slice(start, end));

            }

        })($scope.currentPage = , $scope.itemPerPage = , $scope.pageSizes = [,, , , ], $scope.editPage = true);

以下是引入的分页插件文件

/*

 * angular-ui-bootstrap

 * http://angular-ui.github.io/bootstrap/

 * Version: 0.12.1 - 2015-10-17

 * License: MIT

 * ReWrite Ver:1.0.1

 * Fixed:页数只能输入数字

 *

 * ReWrite Ver:1.0.2

 * Fixed:页数计算优化

 */

//angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.pagination"]);

//angular.module("ui.bootstrap.tpls", ["template/pagination/pager.html","template/pagination/pagination.html"]);

angular.module('ui.bootstrap.pagination', ["template/pagination/pager.html","template/pagination/pagination.html"])

    .controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {

      $scope.pageSizes =[,, , , , , ];

      var self = this,

          ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl

          setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;

      this.init = function(ngModelCtrl_, config) {

        ngModelCtrl = ngModelCtrl_;

        this.config = config;

        ngModelCtrl.$render = function() {

          self.render();

        };

        if ($attrs.itemsPerPage) {

          $scope.$parent.$watch($parse($attrs.itemsPerPage), function(n,o) {

            if(n) {

              self.itemsPerPage = parseInt(n, );

              $scope.itemPerPage = parseInt(n, );

              $scope.totalPages = self.calculateTotalPages();

            }

          });

        } else {

          this.itemsPerPage = config.itemsPerPage;

        }

      };

      this.calculateTotalPages = function() {

        var totalPages = this.itemsPerPage <  ?  : Math.ceil($scope.totalItems / this.itemsPerPage);

        return Math.max(totalPages || , );

      };

      this.render = function() {

        if(ngModelCtrl.$viewValue!='')

          $scope.page = parseInt(ngModelCtrl.$viewValue, ) || ;

      };

      $scope.selectPage = function(page) {

        console.log('page:',page)

        if (/^[-]+$/.test(page)) {

          if ($scope.page !== page && page >  && page <= $scope.totalPages) {

            ngModelCtrl.$setViewValue(page);

            ngModelCtrl.$render();

          }

          if(page==){

              setTimeout(function () {

                  $("#paginationNum").focus();

                  $("#paginationNum").select();

              })

          }

        }else {

          $scope.selectPage($scope.currentPage='');

        }

      };

      $scope.getText = function( key ) {

        return $scope[key + 'Text'] || self.config[key + 'Text'];

      };

      $scope.noPrevious = function() {

        return $scope.page === ;

      };

      $scope.noNext = function() {

        return $scope.page === $scope.totalPages;

      };

      $scope.$watch('totalItems', function() {

        $scope.totalPages = self.calculateTotalPages();

      });

      $scope.$watch('totalPages', function(value) {

        setNumPages($scope.$parent, value); // Readonly variable

        if ( $scope.page > value ) {

          $scope.selectPage(value);

        } else {

          ngModelCtrl.$render();

        }

      });

      $scope.checkPage=function(min,max,c) {

        var current = c;

        if (typeof current != 'string' || current.length > ){

            current = current < min ? min : current > max ? max : current;

        }

        return current;

      };

        // $scope.keyDown = function (page) {

        //     var oEvent = window.event;

        //     if (oEvent.keyCode == 8 && page == 1) {

        //         $("#paginationNum").focus();

        //         $("#paginationNum").select();

        //     }

        // };

        //

        window.keyDown = function () {

            var oEvent = window.event;

            if (oEvent.keyCode ==  && $scope.currentPage == ) {

                $("#paginationNum").focus();

                $("#paginationNum").select();

            }

        }

    }])

    .constant('paginationConfig', {

      itemsPerPage: ,

      boundaryLinks: false,

      directionLinks: true,

      firstText: 'First',

      previousText: 'Previous',

      nextText: 'Next',

      lastText: 'Last',

      rotate: true

    })

    .directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {

      return {

        restrict: 'EA',

        scope: {

          totalItems: '=',

          itemsPerPage:'=',

          pageSizes:'=',

          editPage:'=',

          firstText: '@',

          previousText: '@',

          nextText: '@',

          lastText: '@',

          currentPage:'=ngModel'

        },

        require: ['pagination', '?ngModel'],

        controller: 'PaginationController',

        templateUrl: 'template/pagination/pagination.html',

        replace: true,

        link: function(scope, element, attrs, ctrls) {

          var paginationCtrl = ctrls[], ngModelCtrl = ctrls[];

          if (!ngModelCtrl) {

            return; // do nothing if no ng-model

          }

          scope.$watch('itemsPerPage',function(n,o){

            if(n&&n!=o) {

              ngModelCtrl.$setViewValue();

              ngModelCtrl.$setViewValue();

              ngModelCtrl.$render();

            }

          })

          // Setup configuration parameters

          var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,

              rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;

          scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;

          scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;

          paginationCtrl.init(ngModelCtrl, paginationConfig);

          if (attrs.maxSize) {

            scope.$parent.$watch($parse(attrs.maxSize), function(value) {

              maxSize = parseInt(value, );

              paginationCtrl.render();

            });

          }

          // Create page object used in template

          function makePage(number, text, isActive) {

            return {

              number: number,

              text: text,

              active: isActive

            };

          }

          function getPages(currentPage, totalPages) {

            var pages = [];

            // Default page limits

            var startPage = , endPage = totalPages;

            var isMaxSized = ( angular.isDefined(maxSize) && maxSize < totalPages );

            // recompute if maxSize

            if ( isMaxSized ) {

              if ( rotate ) {

                // Current page is displayed in the middle of the visible ones

                startPage = Math.max(currentPage - Math.floor(maxSize/), );

                endPage   = startPage + maxSize - ;

                // Adjust if limit is exceeded

                if (endPage > totalPages) {

                  endPage   = totalPages;

                  startPage = endPage - maxSize + ;

                }

              } else {

                // Visible pages are paginated with maxSize

                startPage = ((Math.ceil(currentPage / maxSize) - ) * maxSize) + ;

                // Adjust last page if limit is exceeded

                endPage = Math.min(startPage + maxSize - , totalPages);

              }

            }

            // Add page number links

            for (var number = startPage; number <= endPage; number++) {

              //ignore those unused numbers

              if(number == startPage||number == endPage || number < currentPage+&&number > currentPage-) {

                var page = makePage(number, number, number === currentPage);

                pages.push(page);

              }

            }

            // Add links to move between page sets

            if ( isMaxSized && ! rotate ) {

              if ( startPage >  ) {

                var previousPageSet = makePage(startPage - , '...', false);

                pages.unshift(previousPageSet);

              }

              if ( endPage < totalPages ) {

                var nextPageSet = makePage(endPage + , '...', false);

                pages.push(nextPageSet);

              }

            }

            return pages;

          }

          var originalRender = paginationCtrl.render;

          paginationCtrl.render = function() {

            originalRender();

            if (scope.page >  && scope.page <= scope.totalPages) {

              scope.pages = getPages(scope.page, scope.totalPages);

            }

          };

        }

      };

    }])

    .constant('pagerConfig', {

      itemsPerPage: ,

      previousText: '« Previous',

      nextText: 'Next »',

      align: true

    })

    .directive('pager', ['pagerConfig', function(pagerConfig) {

      return {

        restrict: 'EA',

        scope: {

          totalItems: '=',

          previousText: '@',

          nextText: '@'

        },

        require: ['pager', '?ngModel'],

        controller: 'PaginationController',

        templateUrl: 'template/pagination/pager.html',

        replace: true,

        link: function(scope, element, attrs, ctrls) {

          var paginationCtrl = ctrls[], ngModelCtrl = ctrls[];

          if (!ngModelCtrl) {

            return; // do nothing if no ng-model

          }

          scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;

          paginationCtrl.init(ngModelCtrl, pagerConfig);

        }

      };

    }]);

angular.module("template/pagination/pager.html", []).run(["$templateCache", function($templateCache) {

  $templateCache.put("template/pagination/pager.html",

      "<ul class=\"pager\">\n" +

      "  <li ng-class=\"{disabled: noPrevious(), previous: align}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" +

      "  <li ng-class=\"{disabled: noNext(), next: align}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" +

      "</ul>");

}]);

// angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {

//   $templateCache.put("template/pagination/pagination.html",

//       "<div>\n"+

//       "<div class=\"edit\"><span class=\"total-page\" ng-show=\"editPage\">&nbsp;共{{totalPages}}页&nbsp;&nbsp;共{{totalItems}}条&nbsp;&nbsp;</span><span class=\"page-edit\" ng-show=\"editPage\">第&nbsp;"+

//       "<input type=\"text\" ng-model=\"currentPage\" ng-change=\"selectPage(currentPage=checkPage(1,totalPages,currentPage))\""+

//       "requied class=\"table-counts-text\"/>&nbsp;页</span><span class=\"page-size-edit\" ng-show=\"pageSizes\">&nbsp;&nbsp;每页&nbsp;\n"+

//       "<select ng-model=\"itemsPerPage\" class=\"table-counts-select\"\n"+

//       "ng-options=\"count as count  for count in pageSizes\">\n"+

//       "</select>&nbsp;条</span>\n"+

//       "</div>\n"+

//       "<ul class=\"pagination\">\n" +

//       "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\">{{getText('first')}}</a></li>\n" +

//       "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\">{{getText('previous')}}</a></li>\n" +

//       "  <li ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16\" "+

//       "ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\">"+

//       "<a ng-if=\"page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16\" href ng-click=\"selectPage(page.number)\">{{page.text}}</a>"+

//       "<span ng-if=\"page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16\">....</span></li>\n" +

//       "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\">{{getText('next')}}</a></li>\n" +

//       "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\">{{getText('last')}}</a></li>\n" +

//       "</ul></div>");

// }]);

angular.module("template/pagination/pagination.html", []).run(["$templateCache", function($templateCache) {

  $templateCache.put("template/pagination/pagination.html",

      "<div class='row'><div class='col-sm-4 hidden-xs'>跳至 <input type='number' id='paginationNum' class='input-sm form-control inline v-middle text-center' style='width: 50px' ng-model='currentPage' ng-pattern='/^[0-9]+$/' ng-change='selectPage(currentPage=checkPage(1,totalPages,currentPage))' requied> 页，每页显示<select class='form-control input-sm' style='width: 100px;display: inline-block'  ng-model='itemsPerPage'  ng-options='count as count  for count in pageSizes'></select>条</div><div class='col-sm-4 text-center'><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>总共{{totalItems}}条记录</small><small class='text-muted inline m-t-sm m-b-sm' ng-show='editPage'>/共{{totalPages}}页</small></div><div class='col-sm-4 text-right text-center-xs'><ul class='pagination m-t-none m-b-none'><li  ng-if='boundaryLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(1)'><i class='fa fa-chevron-left'></i>{{getText('first')}}</a></li><li ng-if='directionLinks' ng-class='{disabled: noPrevious()}'><a href ng-click='selectPage(page - 1)'>{{getText('previous')}}</a></li><li ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<=16' ng-repeat='page in pages track by $index' ng-class='{active: page.active}'><a href  ng-if='page.number==1||page.number==totalPages||(page.number-currentPage)*(page.number-currentPage)<16' ng-click='selectPage(page.number)'>{{page.text}}</a><span ng-if='page.number!=1&&page.number!=totalPages&&(page.number-currentPage)*(page.number-currentPage)==16'>....</span></li><li ng-if='directionLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(page + 1)'>{{getText('next')}}</a></li><li ng-if='boundaryLinks' ng-class='{disabled: noNext()}'><a href ng-click='selectPage(totalPages)'><i class='fa fa-chevron-right'></i>{{getText('last')}}</a></li></ul></div></div>");

}]);

angular 分页插件的使用的更多相关文章

angular分页插件tm.pagination 解决触发二次请求的问题
angular分页插件tm.pagination(解决触发二次请求的问题) DEMO: http://jqvue.com/demo/tm.pagination/index.html#?current ...
angular分页插件tm.pagination二次触发问题解决歪方案
今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...
在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
一款好用的分页插件用于regularJS
最近在用一款来自网易的javascript MVC 框架regularJS来写项目,这是网易一位叫郑海波的大神写的一款框架,所谓regualrJS, 作者这样取名主要是因为这个框架更像是angular ...
angularJS前端分页插件
首先在项目中引入分页插件的 js 和 css: 在html页面引入相关js 和 css: 在控制器中引入分页插件中定义的 module[可以打开pagination.js查看,可以看到其实,在插 ...
MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
[原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
一个强大的jquery分页插件
点击这里查看效果这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

随机推荐

微信小程序中的app.js-清除缓存
微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...
C#退出窗体的总结方法
一.关闭窗体在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.ExitThread(); System.En ...
MySQL：数据库表的空间回收
1. 表数据的存储方式表数据既可以存储在共享表空间,也可以时单独的文件.这个行为由参数 innodb_file_per_table 控制: 设置为 OFF 时,表示表数据存储在共享表空间: 设置为 ...
oo第二单元的自白
电梯第一次作业第一次电梯较为简单,主要目的在于初步接触多线程,可以实现一些简单的操作. 在本次作业中,为了更好的了解多线程,我也阅读了一些代码,并据此仿写完成了第一次作业. 根据生产者和消费者的模式 ...
Spring 静态代理+JDK动态代理和CGLIB动态代理
代理分为两种:静态代理动态代理静态代理:本质上会在硬盘上创建一个真正的物理类动态代理:本质上是在内存中构建出一个类. 如果多个类需要进行方法增强,静态代理则需要创建多个物理类,占用磁盘空间.而动 ...
python数据抓取分析（python + mongodb）
分享点干货!!! Python数据抓取分析编程模块:requests,lxml,pymongo,time,BeautifulSoup 首先获取所有产品的分类网址: def step(): try: ...
C语言小笔记
头文件的书写头文件实现函数声明,在使用模板后可以实现一个C文件中即使重复包含某个头文件,在系统中用于只会确认为一个包含头文件包含可以理解为将头文件内容替换#include“...”行模板(don ...
Java 虚拟机对锁优化所做的努力
作为一款公用平台,JDK 本身也为并发程序的性能绞尽脑汁,在 JDK 内部也想尽一切办法提供并发时的系统吞吐量.这里,我将向大家简单介绍几种 JDK 内部的 "锁" 优化策略. 1 ...
FTP服务器搭建与访问的相关问题
近期想搭建在云服务器上搭建一个项目,每次远程登陆服务器实在比较繁琐,故而想到使用FTP上传下载方式来进行相应的操作:在网络上搭建FTP服务器的文档还是很丰富的,按照操作一步步来还算方便,楼主就不在这边 ...
分布式事务之深入理解什么是2PC、3PC及TCC协议？
导读在上一篇文章<[分布式事务]基于RocketMQ搭建生产级消息集群?>中给大家介绍了基于RocketMQ如何搭建生产级消息集群.因为本系列文章最终的目的是介绍基于RocketMQ的事 ...

angular 分页插件的使用

angular 分页插件的使用的更多相关文章

随机推荐

热门专题