本文主要介紹了js對table和ul li實現前台分頁,需要的朋友可以參考下
代碼如下: (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 = "<div class='ref'><a href='javascript:void(0)' id='fresh_" + fresh_id + "' onClick='fresh(this.id);' class='sx' style='color:#247AA9;'><span>刷新</span></a></div>"; 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>"; sPageStr += "<div class='txt'>"+"共"+Math.ceil(dCount / dCountOfPage)+"頁,當前第"+"<strong>"+dNowIndex+"</strong>"+"頁"+"</div>"; 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); 代碼如下: <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>