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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
通过js示例讲解时间复杂度与空间复杂度
Aug 06 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php生成静态页面的简单示例
2014/04/17 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php 猴子摘桃的算法
2017/06/20 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JS随机密码生成算法
2019/09/23 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Python 专题四 文件基础知识
2017/03/20 Python
python实现图片处理和特征提取详解
2017/11/13 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
创业计划书撰写原则
2014/01/25 职场文书
机关门卫制度
2014/02/01 职场文书
淘宝活动策划方案
2014/02/06 职场文书
请假条怎么写
2014/04/10 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
治庸问责工作总结
2015/08/11 职场文书
六年级作文之关于梦
2019/10/22 职场文书