jQuery实现伪分页的方法分享


Posted in Javascript onFebruary 17, 2016

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

可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现。

实现的很简单、样式也不太好看,大家可以自行调整,纠正。

下面是一个table,tbody里加载tr数据,无论你怎么加载,

在数据加载完成后便可以对table数据进行伪分页、注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域

<table>
   <tbody id="dialog-items">
    </tbody>
    <tfoot>
      <tr>
       <td colspan="4">
        <div id="maskPage" class="page_btn">
        </div>
       </td>
    </tr>
   </tfoot>
</table>

下面是css和js方法

.page_btn{padding-top:0px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}

js方法如下

//对tbody伪分页;pageDiv:用于显示分页数据的div tbodyId :tbody的ID,pageSize,分页数目
function pagiNation(pageDiv,tbodyId,pageSize){
  $("#"+tbodyId+" tr:gt("+(pageSize-1)+")").hide();//初始化,前面pageSize-1条数据显示,其他的数据隐藏。
  var total_q=$("#"+tbodyId+" tr").length;//总数据
  var current_page=pageSize;//每页显示的数据
  var current_num=1;//当前页数
  var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//总页数
  var pagePlugIn = "<span class=\"page_box\">"+
          "<a id=\""+tbodyId+"_prev\" class=\"prev\">上一页</a>"+
          "<span id=\""+tbodyId+"_num\" class=\"num\">"+
          "<span id=\""+tbodyId+"_current_page\" class=\"current_page\">1</span>"+
          "<span style=\"padding:0 3px;\">/</span>"+
          "<span id=\""+tbodyId+"_total\" class=\"total\"></span></span>"+
          "<a id=\""+tbodyId+"_next\" class=\"next\">下一页</a>"+
          "</span>";
  $("#"+pageDiv+"").html(pagePlugIn);
  var next=$("#"+tbodyId+"_next");//下一页
  var prev=$("#"+tbodyId+"_prev");//上一页
  $("#"+tbodyId+"_total").text("");//显示总页数
  $("#"+tbodyId+"_total").text(total_page);//显示总页数
  $("#"+tbodyId+"_current_page").text("");//当前的页数
  $("#"+tbodyId+"_current_page").text(current_num);//当前的页数
  //下一页
 $("#"+tbodyId+"_next").unbind("click");
 $("#"+tbodyId+"_next").click(function(){
 if(current_num==total_page){
    return false;//如果大于总页数就禁用下一页
 }
 else{
   $("#"+tbodyId+"_current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
   $.each($("#"+tbodyId+" tr"),function(index,item){
   var start = current_page* (current_num-1);//起始范围
   var end = current_page * current_num;//结束范围
   if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示,否则就隐
    $(this).show();
   }else {
   $(this).hide();
   }
 });
 }
});
//上一页方法
$("#"+tbodyId+"_prev").unbind("click");
$("#"+tbodyId+"_prev").click(function(){
  if(current_num==1){
    return false;
  }else{
    $("#"+tbodyId+"_current_page").text(--current_num);
    $.each($("#"+tbodyId+" tr"),function(index,item){
    var start = current_page* (current_num-1);//起始范围
    var end = current_page * current_num;//结束范围
    if(index >= start && index < end){//如果索引值是start和end之间的元素就显示,否则就隐藏
      $(this).show();
    }else {
      $(this).hide();
    }
  });
}
})
  $("#"+pageDiv+"").show();
}

页面引用css和js,加载完成数据后,

function fillTabl(){
     ......................
     数据填充.............
     ..........................
     pagiNation('maskPage','dialog-items',10); //传入div的id,tbody的id,还有分页数
}

效果如下:

jQuery实现伪分页的方法分享

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

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 #Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 #Javascript
纯JavaScript代码实现文本比较工具
Feb 17 #Javascript
JavaScript实现身份证验证代码
Feb 17 #Javascript
AngularJS 最常用的功能汇总
Feb 17 #Javascript
AngularJS身份验证的方法
Feb 17 #Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 #Javascript
You might like
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python中%r和%s的详解及区别
2017/03/16 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
公司员工的自我评价范例
2013/11/01 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
毕业生就业协议书
2014/04/11 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
信用卡催款律师函
2015/05/27 职场文书
四则混合运算教学反思
2016/02/23 职场文书