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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
js实现烟花特效
Mar 02 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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中文字符截取防乱码
2008/03/28 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php实现可逆加密的方法
2015/08/11 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
js获取视频时长代码
2014/04/10 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Selenium的使用详解
2018/10/19 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
企业口号大全
2014/06/12 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
党支部意见范文
2015/06/02 职场文书
运动会通讯稿100字
2015/07/20 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
Redis 哨兵集群的实现
2021/06/18 Redis
java executor包参数处理功能 
2022/02/15 Java/Android