/** *分頁工具條初始化 * *@param {string} [pageId] [頁面分頁工具欄外層容器標簽ID] *@param {number} [sumPage] [總頁數] *@param {number} [currPage] [當前頁] * *@author:h51701 *@date:2017/3/27 * */ pageUtil("#page",40,8); function pageUtil(element,sumPage,curPage){ //off 每次綁定事件前先卸載多個事件 $(element).off("click", "a").on("click","a",function(){ index = $(this).text(); switch(index){ case "首頁": pageUtil(element,sumPage,1); break; case "<<上一頁": if(startPage == 1) break; pageUtil(element,sumPage,curPage-1); break; case "下一頁>>": if(curPage == sumPage) break; pageUtil(element,sumPage,curPage+1); break; case "尾頁": pageUtil(element,sumPage,sumPage); break; default: pageUtil(element,sumPage,parseInt(index)); break; } }); //分頁工具條主結構 var mainStr = '<a href="" class="last" onclick="return false">下一頁>></a>'; mainStr = curPage == 1 ? "" + mainStr : '<a href="" class="last" onclick="return false"><<上一頁</a>' + mainStr; mainStr = curPage > 5 ? '<a href="" onclick="return false">首頁</a>' + mainStr : mainStr; mainStr += curPage > 10 && curPage < (sumPage-5) ? '<a href="" onclick="return false">尾頁</a>' : ""; $(element).html(mainStr); //確認頁碼起始數字 var startPage = curPage < 6 ? 1 : curPage-4, pageNumStr = ""; //若起始頁數小於最后一頁 並且 循環不大於十次 for(var i=0;startPage<=sumPage&&i<10;i++){ startPage == curPage ? pageNumStr += "<a href='' class='red' onclick='return false'>"+startPage+"</a>" : pageNumStr += "<a href='' onclick='return false'>"+startPage+"</a>"; startPage++; } //添加 $(element).find("a:contains('下一頁')").before(pageNumStr); }
簡單的分頁控件,輸入容器id值即可。