jQuery实现的分页功能示例


Posted in Javascript onJanuary 22, 2017

本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考,具体如下:

1、分页栏HTML码

<div class="g-cf g-pagerwp">
  <div style="visibility:hidden" class="g-pager">
  </div>
</div>

2、CSS样式文件

.g-cf:after {clear: both;content: "";display: table;}
.g-cf {zoom:1;}
/*分页*/
.g-pager{ text-align:center; color: #111111; font: 12px/1.5em Arial,Tahoma; float: right;}
.g-pager a,.g-pager input{ cursor:pointer; border:solid 1px #0F71BE; padding:1px 4px; color:#0F71BE; margin:0 2px; vertical-align:middle; }
.g-pager a.cur,.g-pager a:hover{ background-color:#0F71BE; color:#fff}
.g-pager a.no{ border-color:#A3A3A3; color:#A3A3A3; background-color:#E4F2F9}
.g-pager span{ margin-right:10px; }
.g-pager input{ cursor:default; width:28px; padding:1px 2px; }
.g-pagerwp{ height:23px; line-height:23px;padding:5px; margin-bottom:10px; border: 1px solid #DDDDDD;}
.g-pagerwp .g-btn{ vertical-align:top}

3、JS脚本文件

① 引用JQuery和分页脚本

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/jquery.PageBar.js" type="text/javascript"></script>

② 编写jquery.PageBar.js脚本

/**************************/
//JQuery分页栏
/**************************/
$.fn.pageBar = function(options) {
  var configs = {
    PageIndex: 1,
    PageSize: 15,
    TotalPage: 0,
    RecordCount: 0,
    showPageCount: 4,
    onPageClick: function(pageIndex) {
      return false;  //默认的翻页事件
    }
  }
  $.extend(configs, options);
  var tmp = "",
  i = 0,
  j = 0,
  a = 0,
  b = 0,
  totalpage = parseInt(configs.RecordCount / configs.PageSize);
  totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage;
  tmp += "<span>总记录数:" + configs.RecordCount + "</span > ";
  tmp += " <span>页数:" + totalpage + "</span>";
  if (configs.PageIndex > 1) {
    tmp += "<a><</a>"
  } else {
    tmp += "<a class=\"no\"><</a>"
  }
  tmp += "<a>1</a>";
  if (totalpage > configs.showPageCount + 1) {
    if (configs.PageIndex <= configs.showPageCount) {
      i = 2;
      j = i + configs.showPageCount;
      a = 1;
    } else if (configs.PageIndex > totalpage - configs.showPageCount) {
      i = totalpage - configs.showPageCount;
      j = totalpage;
      b = 1;
    } else {
      var k = parseInt((configs.showPageCount - 1) / 2);
      i = configs.PageIndex - k;
      j = configs.PageIndex + k + 1;
      a = 1;
      b = 1;
      if ((configs.showPageCount - 1) % 2) {
        i -= 1
      }
    }
  }
  else {
    i = 2;
    j = totalpage;
  }
  if (b) {
    tmp += "..."
  }
  for (; i < j; i++) {
    tmp += "<a>" + i + "</a>"
  }
  if (a) {
    tmp += " ... "
  }
  if (totalpage > 1) {
    tmp += "<a>" + totalpage + "</a>"
  }
  if (configs.PageIndex < totalpage) {
    tmp += "<a>></a>"
  } else {
    tmp += "<a class=\"no\">></a>"
  }
  tmp += "<input type=\"text\" /><a>Go</a>"
  var pager = this.html(tmp)
  var index = pager.children('input')[0]
  pager.children('a').click(function() {
    var cls = $(this).attr('class');
    if (this.innerHTML == '<') {
      if (cls != 'no') {
        configs.onPageClick(configs.PageIndex - 2)
      }
    } else if (this.innerHTML == '>') {
      if (cls != 'no') {
        configs.onPageClick(configs.PageIndex)
      }
    } else if (this.innerHTML == 'Go') {
      if (!isNaN(index.value)) {
        var indexvalue = parseInt(index.value);
        indexvalue = indexvalue < 1 ? 1 : indexvalue
        indexvalue = indexvalue > totalpage ? totalpage : indexvalue
        configs.onPageClick(indexvalue - 1)
      }
    } else {
      if (cls != 'cur') {
        configs.onPageClick(parseInt(this.innerHTML) - 1)
      }
    }
  }).each(function() {
    if (configs.PageIndex == parseInt(this.innerHTML)) {
      $(this).addClass('cur')
    }
  })
}

③ 初始化使用

$(document).ready(function() {
  //设置分页信息
  var pageOptions = {
    AllowPaging: true,
    PageIndex: 1,    //设置当前页码
    PageSize: 15,    //设置分页大小
    RecordCount: 1092, //设置数据总数
    TotalPage: 73,   //设置总页数
    showPageCount: 4,
    onPageClick: function(pageIndex) {
    alert("您点击了第" + parseInt(pageIndex + 1) + "页");  //自定义您的翻页事件
      return false;
    }
  }
  //初始化分页栏
  $('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions);
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
JS封装cavans多种滤镜组件
Feb 15 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
You might like
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python类的用法实例浅析
2015/05/27 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
python实现textrank关键词提取
2018/06/22 Python
Python os.access()用法实例
2019/02/18 Python
Django中create和save方法的不同
2019/08/13 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
什么是继承
2013/12/07 面试题
《童趣》教学反思
2014/02/19 职场文书
中等生评语大全
2014/05/04 职场文书
回复函范文
2015/07/14 职场文书
python本地文件服务器实例教程
2021/05/02 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python