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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
jQuery使用方法
Feb 04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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作的文本留言本的例子(六)
2006/10/09 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Highcharts入门之简介
2016/08/02 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
详解python调用cmd命令三种方法
2019/07/08 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
外科实习自我鉴定
2013/10/06 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
优乐美广告词
2014/03/14 职场文书
产品质量承诺范本
2014/03/31 职场文书
某某同志考察材料
2014/05/28 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Django操作cookie的实现
2021/05/26 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android