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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP文件上传实例详解!!!
2007/01/02 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
django fernet fields字段加密实践详解
2019/08/12 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python构造函数init实例方法解析
2020/01/19 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
给交警的表扬信
2014/01/12 职场文书
公益广告宣传方案
2014/02/28 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
Python编写冷笑话生成器
2022/04/20 Python