博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分享一个jquery的伪分页方法
阅读量:6610 次
发布时间:2019-06-24

本文共 2601 字,大约阅读时间需要 8 分钟。

hot3.png

原始的代码是来自这个网站 但是原始帖子我也不知道是哪个,我觉得不太好用,自己整合了一下,可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现。

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

 

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

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

 

 

下面是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 = ""+					"上一页"+					""+					"1"+					"/"+					""+					"下一页"+					"";      $("#"+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,还有分页数

        

   }

 

效果如下:

 

 

 

 

 

 

 

转载于:https://my.oschina.net/tosoonersky/blog/134485

你可能感兴趣的文章
云安全:这也是需要花大钱去建设的部分
查看>>
以全局产业观领航智慧城市建设
查看>>
5G网络不止能1秒下一部电影,它还能够…
查看>>
中国电信集采终端6700万部 金额达1070亿元
查看>>
2016年的十个数据中心故事
查看>>
《Java并发编程的艺术》一一3.3 顺序一致性
查看>>
《CCNP SWITCH 300-115认证考试指南》——导读
查看>>
《设计之外——比修图更重要的111件事》—第1部分3 虚心学习
查看>>
Solaris Studio 12.4 Beta update 7/2014
查看>>
EVCache —— Netflix 的分布式内存数据存储
查看>>
《用友ERP-U8(8.72版)标准财务模拟实训》——1.4 系统管理注册和导入演示账套...
查看>>
《Node.js区块链开发》一3.6 总结
查看>>
《UG NX8.0中文版完全自学手册》一2.8 布尔运算
查看>>
移动阅读时代“长文章”生存状态调查
查看>>
springboot docker笔记
查看>>
跟我一起学QT3:电子表格的制作
查看>>
mysql char和varchar区别
查看>>
Modbus RTU 通信工具设计
查看>>
服务化改造实践 | 如何在 Dubbo 中支持 REST
查看>>
Logwatch linux日志监视器解析
查看>>