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中的事件代理初探
Mar 08 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
JavaScript console的使用方法实例分析
Apr 28 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue 登录滑动验证实现代码
2018/08/24 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Python 命令行参数sys.argv
2008/09/06 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python如何在循环引用中管理内存
2018/03/20 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python dlib人脸识别代码实例
2019/04/04 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python访问hdfs的操作
2020/06/06 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
数学专业推荐信范文
2013/11/21 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书