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 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
php 魔术方法详解
2014/11/11 PHP
php实现两个数组相加的方法
2015/02/17 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
table行随鼠标移动变色示例
2014/05/07 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python实现爬山算法的思路详解
2019/04/09 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
如何写你的创业计划书
2014/01/07 职场文书
服务员自我评价
2014/01/25 职场文书
销售顾问岗位职责
2014/02/25 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
工作鉴定评语
2014/05/04 职场文书
党的生日演讲稿
2014/09/10 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
西双版纳导游词
2015/02/03 职场文书
销售合作意向书范本
2015/05/08 职场文书
物业管理交接协议书
2016/03/24 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
关于的python五子棋的算法
2022/05/02 Python