AngularJs分页插件使用详解


Posted in Javascript onJune 30, 2018

angularUI bootstrap提供的分页插件满足了大部分应用的需求,具体内容如下

在项目需求中,新增了两个需求:

1.自由设定每页显示的条目;

2.可以手动输入页面,跳转到指定的页数。

html代码

<div class="pagination-define p20 mt20" ng-hide="totalItems==0">
 <select ng-model="perPageSize" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" >
  <option value=10 ng-selected="perPageSize==10">10</option>
  <option value=20>20</option>
  <option value=30>30</option>
  <option value=50>50</option>
  <option value=100>100</option>
 </select>
 <uib-pagination items-per-page="numPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged({currentPage:currentPage,perPageSize:perPageSize})" max-size="5" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" rotate="false" previous-text="‹" next-text="›" first-text="«" last-text="»"></uib-pagination>
 <input type="text" ng-model="inputCurPage" min=1 cus-max-number ="{{maxPages}}" current-page="{{currentPage}}">
 <button class="btn btn-info btn-30h" ng-click="pageChanged({currentPage:inputCurPage,perPageSize:perPageSize})" ng-disabled="inputCurPage==''||submitting">Go</button>
</div>

css代码

.pagination-define{
 text-align: center
}
.pagination-define input, .pagination-define select {
 padding-left: 3px;
 height: 30px;
 vertical-align: top;
 border: 1px solid #ccc;
 border-radius: 4px;
 width: 50px;
}
.pagination {
 margin: 0;
}
.pagination-define .btn-30h {
 vertical-align: top;
}
.btn-30h {
 padding-top: 4px;
 padding-bottom: 4px;
}

Javascript代码

app.directive('cusMaxNumber', ['$timeout', function ($timeout) {
  return {
   restrict: 'EA',
   require: 'ngModel',
   scope: {
    maxNumber: '@cusMaxNumber',
    currentPage: '@currentPage'
   },
   link: function (scope, element, attr, ctrl) {
    ctrl.$parsers.push(function (viewValue) {
     var maxNumber = parseInt(scope.maxNumber, 10);
     var curNumber = scope.currentPage; //当前页数
     var transformedInput = viewValue.replace(/[^0-9]/g, '');
     if (transformedInput !== viewValue||parseInt(transformedInput,10)<1||parseInt(transformedInput,10)>maxNumber) {
      ctrl.$setViewValue(curNumber);
      ctrl.$render();
      return curNumber;
     }
     return viewValue;
    });
   }
  };
 }])
.directive('cusPagination',[function(){
  return {
   restrict: "E",
   templateUrl: 'views/template/pagination.html',
   scope: {
    numPerPage: "=numPerPage",
    totalItems: "=totalItems",
    currentPage: "=cusCurrentPage",
    perPageSize:"=perPageSize",
    inputCurPage:"=inputCurPage",
    maxPages:"=maxPages",
    pageChanged: "&pageChanged"
   },
   replace: false
  };
 }]);

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

Javascript 相关文章推荐
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
Three.js基础部分学习
Jan 08 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 #Javascript
vue检测对象和数组的变化分析
Jun 30 #Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
You might like
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
高中毕业自我鉴定
2013/12/16 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
药品营销策划方案
2014/06/15 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
初三语文教学计划
2015/01/22 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server