angularjs+bootstrap实现自定义分页的实例代码


Posted in Javascript onJune 19, 2017

目前在做一个java web页面,没有使用到框架的分页,所以需要自己实现分页,就想到了用angularjs来实现分页,数据通过ajax从后台获取。

插件

百度了一下,看到一个比较漂亮的插件,就直接用该插件,并修改了部分细节,使得适合我的项目,该插件地址是:(https://github.com/miaoyaoyao/AngularJs-UI)

效果图

angularjs+bootstrap实现自定义分页的实例代码

使用方法

1、在网页的头部引入angularjs、bootstarp以及该插件,该分页插件主要是ng-pagination.css以及ng-pagination.js

<link rel="stylesheet" href="/nutz-test/static/bootstrap/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="/nutz-test/static/angular/ng-pagination.css" rel="external nofollow" >
<script src="/nutz-test/static/jquery/jquery.min.js"></script>
<script src="/nutz-test/static/angular/angular.min.js"></script>
<script src="/nutz-test/static/angular/ng-pagination.js"></script>
<script src="/nutz-test/static/bootstrap/bootstrap.min.js"></script>

2、表格代码以及分页代码

<div id="app" ng-app="myApp" ng-controller="myCtrl">
 <div style="overflow: auto; width: 100%;">
   <table class="table table-hover table-striped table-bordered" id="j-table">
     <thead>
       <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>电话</th>
         <th>职位</th>
       </tr>    
     </thead>
     <tbody>
       <tr ng-repeat="item in list">
         <th title="{{item.name}}">{{item.name}}</th>
         <th title="{{item.age}}">{{item.age}}</th>
         <th title="{{item.tel}}">{{item.tel}}</th>
         <th title="{{item.position}}">{{item.position}}</th>
       </tr>
     </tbody>
   </table>
 </div>
<!-- 这里引用插件的分页-->
 <div class="pager">
  <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" first-text="首页" next-text="下一页" prev-text="上一页" last-text="尾页" show-goto="true" goto-text="跳转到"></pager>
 </div>
</div>

3、javascript代码部分

分页的重点是从后台获取数据,只需把pageSize(每页显示数目),以及pageIndex(当前页数)通过post请求传到后台即可。后台返回实际的数据以及pageCount(页数)给前台即可。其中,onPageChange()方法是点击页码后去通过ajax从后台获取数据,myinit()方法是第一次请求该页面时进行初始化。$scope.currentPage就是页数,例如当你点击下一页的时候,它就会加一,然后就可以通过post请求去后台取下一页的数据了。

<script type="text/javascript">
var app = angular.module('myApp', ['ng-pagination']);
app.controller('myCtrl', ['$scope', function ($scope) {
  $scope.onPageChange = function() {
     // ajax request to load data
     console.log($scope.currentPage);
     //这里是post请求去后台取数据
     $.ajax({
       type:"post",
       url:'/nutz-test/show/pagination',
       data:{
         "pageSize":5,
         "pageIndex":$scope.currentPage
       },
       dataType:"json",
       success:function(data){
         $scope.$apply(function () {
           $scope.list = data.list;
           $scope.pageCount = data.pageCount;
          });

       }
     })
    };
    //初始化,设置为第一页,每页显示5条
    $scope.myinit = function(){
      $.ajax({
         type:"post",
         url:'/nutz-test/show/pagination',
         data:{
           "pageSize":5,
           "pageIndex":1
         },
         dataType:"json",
         success:function(data){
           $scope.$apply(function () {
             $scope.list = data.list;
             $scope.pageCount = data.pageCount;
            });

         }
       })
    };
    $scope.myinit();
}]);
</script>

注意事项

1、该插件在只有一页的情况会出现分页插件加载不出来的情况,因此需要修改ng-pagination.js的代码。

打开ng-pagination.js,定位到最后的template,修改pageCount>=1,如下图所示。

angularjs+bootstrap实现自定义分页的实例代码

2、在ie浏览器和360浏览器不支持跳转功能,原因是ie和360没有number.isNaN()方法,因此需要修改分页插件的该方法,改为isNaN()。

定位到ng-pagination.js的Number.isNaN()方法,把该方法修改为下图所示。

angularjs+bootstrap实现自定义分页的实例代码

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

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
解决vue中的无限循环问题
Jul 27 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 #Javascript
jQuery实现简单的手风琴效果
Apr 17 #jQuery
原生JS+Canvas实现五子棋游戏实例
Jun 19 #Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 #Javascript
Node.js中 __dirname 的使用介绍
Jun 19 #Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 #Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 #Javascript
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php限制文件下载速度的代码
2015/10/20 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Django权限机制实现代码详解
2018/02/05 Python
python可视化实现代码
2019/01/15 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python 数据类型强制转换的总结
2021/01/25 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
会计系中文个人求职信
2013/12/24 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
租房协议书
2014/04/10 职场文书
财务务虚会发言材料
2014/10/20 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
大学生实习证明
2015/06/16 职场文书