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 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
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开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP运行模式汇总
2016/11/06 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
python操作xml文件示例
2014/04/07 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
物业客服专员岗位职责
2013/11/30 职场文书
狼和鹿教学反思
2014/02/05 职场文书
高一新生军训感言
2014/03/02 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
创业计划书之面包店
2019/09/17 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Redis IP地址的绑定的实现
2021/05/08 Redis