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 相关文章推荐
基于datagrid框架的查询
Apr 08 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
js验证账户名是否重复
May 26 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
Protoss建筑一览
2020/03/14 星际争霸
php类声明和php类使用方法示例分享
2014/03/29 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
用js编写留言板
2020/03/17 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
python实现socket客户端和服务端简单示例
2014/02/24 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
祖国在我心中演讲稿300字
2014/05/04 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书