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 相关文章推荐
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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 magento后台无法登录问题解决方法
2016/11/24 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
最短的IE判断代码
2011/03/13 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
部队领导证婚词
2014/01/12 职场文书
新年寄语大全
2014/04/12 职场文书
市场营销专业求职信
2014/06/17 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
技术经济专业求职信
2014/09/03 职场文书
个人租房协议书
2014/11/28 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
军事博物馆观后感
2015/06/05 职场文书