html ul进行分页,对table和ul实现js分页示例分享

本文介绍了如何使用jQuery实现一个简单的前端表格分页功能,通过change_page_content函数动态显示页码,支持首尾页、上下页切换,并能根据数据量动态过滤显示。适合理解和学习前端数据处理和用户体验设计。
摘要由CSDN通过智能技术生成

(function($) {

$.fn.tablepage = function(oObj, dCountOfPage, fresh_id) {

var dPageIndex = 1;

var dNowIndex = 1;

var sPageStr = "";

var dCount = 0;

var oSource = $(this);

var sNoSelColor = "#CCCCCC";

var sSelColor = "black";

var sFontColor = "white";

var nowIndex = 1;

change_page_content();

function change_page_content() {

// 取得資料筆數

dCount = oSource.children().children().length;

// 顯示頁碼

sPageStr = "

";

sPageStr += " 

首页 上一页 下一页 尾页
";

sPageStr += "

"+"共"+Math.ceil(dCount / dCountOfPage)+"页,当前第"+" "+dNowIndex+""+"页"+"
";

oObj.html(sPageStr);

dPageIndex = 1;

// 過濾表格內容

var rr=oSource.children().children("tr");

oSource.children().children("tr").each(function() {

// ==2

if (dPageIndex >= (((dNowIndex - 1) * dCountOfPage) + 1)

&& dPageIndex <= ((dNowIndex * dCountOfPage) )) {

$(this).show();

} else {

$(this).hide();

}

dPageIndex++;

});

// oSource.children().children("tr").first().show(); // head一定要顯示

if(dCount<=dCountOfPage){

var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {

if(i==2||i==3||i==0||i==1){

$(this).addClass("disabled");

}

});

}

else if(dNowIndex==Math.ceil(dCount / dCountOfPage)){

var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {

if(i==2||i==3){

$(this).addClass("disabled");

}

});

}else if(dNowIndex==1){

var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {

if(i==0||i==1){

$(this).addClass("disabled");

}

});

}

// 加入換頁事件

oObj.children().children().each(function() {

$(this).click(function() {

dNowIndex = $(this)[0].innerHTML;

if (dNowIndex == '首页') {

dNowIndex = 1;

change_page_content();

nowIndex = dNowIndex;

}

if (dNowIndex == '尾页') {

dNowIndex = Math.ceil(dCount / dCountOfPage);

change_page_content();

nowIndex = dNowIndex;

}

if (dNowIndex == '下一页') {

if (nowIndex < Math.ceil(dCount / dCountOfPage)) {

dNowIndex = parseInt(nowIndex) + 1;

change_page_content();

nowIndex = nowIndex + 1;

}

}

if (dNowIndex == '上一页') {

if (nowIndex > 1) {

dNowIndex = parseInt(nowIndex) - 1;

change_page_content();

nowIndex = nowIndex - 1;

}

}

});

});

}

};

})(jQuery);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值