本文分享了两种基于jQuery的分页实现方案。第一种针对HTML表格，通过封装jQuery插件动态计算总页数并控制行显示隐藏；第二种针对Ul列表，通过计算索引范围隐藏多余列表项，并实现首页、尾页及上下页的切换逻辑。代码包含完整的DOM操作与事件绑定示例，适用于需要前端静态分页的场景。
jQuery实现Table表格分页
代码如下:
(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() {\n // 取得資料筆數\n dCount = oSource.children().children().length;\n // 顯示頁碼\n sPageStr = "<div class='ref'><a href='javascript:void(0)' id='fresh_"\n + fresh_id\n + "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span>刷新</span></a></div>";\n sPageStr += " <div class='msdn'><a href='javascript:void(0)'>首页</a><a href='javascript:void(0)'>上一页</a><a href='javascript:void(0)'>下一页</a><a href='javascript:void(0)'>尾页</a></div>";\n sPageStr += "<div class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"页,当前第"+"<strong>"+dNowIndex+"</strong>"+"页"+"</div>"; \n oObj.html(sPageStr);\n dPageIndex = 1;\n // 過濾表格內容\n var rr=oSource.children().children("tr");\n oSource.children().children("tr").each(function() {\n // ==2\n if (dPageIndex >= (((dNowIndex - 1) * dCountOfPage) + 1)\n && dPageIndex <= ((dNowIndex * dCountOfPage) )) {\n $(this).show();\n } else {\n $(this).hide();\n }
dPageIndex++;\n });
// oSource.children().children("tr").first().show(); // head一定要顯示\n if(dCount<=dCountOfPage){\n var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {\n if(i==2||i==3||i==0||i==1){\n $(this).addClass("disabled");\n }\n });\n }\n else if(dNowIndex==Math.ceil(dCount / dCountOfPage)){\n var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {\n if(i==2||i==3){\n $(this).addClass("disabled");\n }\n });\n }else if(dNowIndex==1){\n var tt=$("#table_page_"+fresh_id).children('.msdn').children().each(function(i) {\n if(i==0||i==1){\n $(this).addClass("disabled");\n }\n });\n }\n // 加入換頁事件\n oObj.children().children().each(function() {
$(this).click(function() {
dNowIndex = $(this)[0].innerHTML;\n if (dNowIndex == '首页') {\n dNowIndex = 1;\n change_page_content();\n nowIndex = dNowIndex;\n }\n if (dNowIndex == '尾页') {\n dNowIndex = Math.ceil(dCount / dCountOfPage);\n change_page_content();\n nowIndex = dNowIndex;\n }\n if (dNowIndex == '下一页') {\n if (nowIndex < Math.ceil(dCount / dCountOfPage)) {\n dNowIndex = parseInt(nowIndex) + 1;\n change_page_content();\n nowIndex = nowIndex + 1;\n }\n }\n if (dNowIndex == '上一页') {\n if (nowIndex > 1) {\n dNowIndex = parseInt(nowIndex) - 1;\n change_page_content();\n nowIndex = nowIndex - 1;\n }\n }\n });\n });\n }\n };\n})(jQuery);jQuery实现Ul列表分页
代码如下:
<script type="text/javascript">
$(document).ready( function() {
var totalPage=$("ul li").length;
var total = Math.ceil($("ul li").length / 5);
var current = 1;
//var index =4;
if(totalPage>5){
$("ul li:gt(4)").hide();
$("#btnPrev").attr("class", "tabs-scroller-left-disabled").attr("disabled", "disabled").click( function() {
debugger;
$("#btnNext").attr("class", "tabs-scroller-right");
$("#btnNext").removeAttr("disabled");
current -= 1;
var tt=current;
$("ul li").show();
var indexStart = (current - 1);
var indexEnd = indexStart + 4;
$("li:lt(" + indexStart + "), li:gt(" + indexEnd + ")", $("ul")).hide();
if (current == 1){
$(this).attr("class", "tabs-scroller-left-disabled");
$(this).attr("disabled", "disabled");
}
});
$("#btnNext").click( function() {
debugger;
$("#btnPrev").attr("class", "tabs-scroller-left");
$("#btnPrev").removeAttr("disabled");
current += 1;
$("ul li").show();
var indexStart = (current - 1);
var indexEnd = current + 4 > $("ul li").length - 1 ? $("ul li").length - 1 : current +3;
$("li:lt(" + indexStart + "), li:gt(" + indexEnd +")", $("ul")).hide();
if (current+4 >= totalPage){
$(this).attr("class", "tabs-scroller-right-disabled");
$(this).attr("disabled", "disabled");
}
});
}else{
alert(1);
$("#btnPrev").attr("class", "tabs-scroller-left-disabled");
$("#btnNext").attr("class", "tabs-scroller-right-disabled");
}
});
</script>