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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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 输出简单动态WAP页面
2009/06/09 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
popdiv
2006/07/14 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
django 外键创建注意事项说明
2020/05/20 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
初中生学习生活的自我评价
2013/11/20 职场文书
教师职称自我鉴定
2014/02/12 职场文书
和解协议书
2014/04/16 职场文书
七一建党日演讲稿
2014/09/05 职场文书
优秀教师申报材料
2014/12/16 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
Spring Bean是如何初始化的详解
2022/03/22 Java/Android