Bootstrap分页组件
jopen
8年前
之前我曾写过一篇关于bootstrap分页的文章，简单地展示了使用ajax加载网页内容时，这个bootstrap组件的改进方法，现在我对这个方法进行了封装，让它成为一个比较通用的方法。
先看代码：
function createPagNav($container, totalPageNum, currentNum, BeforeFun, AfterFun,NoPageFun) { var $thisPageNumber, thisShowMinNumber = 1, $prePage, $nextPage, $firstPage, $lastPage, $inputPage, $inputPageBtn; if (!$container || $container.length != 1) return false; $container.html('<nav><ul class="pagination pag-result"></ul></nav>'); var $pagResult = $container.find("ul.pag-result"); var initStr = []; currentNum = currentNum || 0; totalPageNum = totalPageNum || 0; currentNum = parseInt(currentNum); totalPageNum = parseInt(totalPageNum); if (currentNum) { if (currentNum < 1) currentNum = 1; else if (currentNum > totalPageNum) currentNum = totalPageNum; } else currentNum = 1; if (totalPageNum && totalPageNum >= 1) { initStr .push('<li class="disabled first-page" value="1"><span>首页</span></li>'); initStr .push('<li class="disabled pre-page" value="' + (currentNum - 1) + '"><span>上一页</span></li>'); if (totalPageNum == 1) { initStr .push('<li class="disabled next-page" value="' + (currentNum + 1) + '"><span>下一页</span></li>'); initStr.push('<li class="disabled last-page" value="' + totalPageNum + '"><span>末页</span></li>'); } else { initStr .push('<li class="next-page" value="' + (currentNum + 1) + '"><span>下一页</span></li>'); initStr.push('<li class="last-page" value="' + totalPageNum + '"><span>末页</span></li>'); } initStr .push('<div class="input-page-div">当前第<input type="text" maxlength="6" value="' + currentNum + '" />页，共<span>' + totalPageNum + '</span>页<button type="button" class="btn btn-xs input-btn-xs">确定</button></div>'); $pagResult.append(initStr.join("")); // 初始化变量 $prePage = $container.find("li.pre-page"); $nextPage = $container.find("li.next-page"); $firstPage = $container.find("li.first-page"); $lastPage = $container.find("li.last-page"); $inputPage = $container.find("div.input-page-div input"); $inputPageBtn = $container.find("div.input-page-div button"); // 生成页码 CreatPageLi(ComputeStartPage(currentNum, totalPageNum), currentNum, totalPageNum); // 绑定点击事件 $pagResult.bind("click", function (e) { var target = e.target; var $targetP = $(target).parent(); if (!$targetP.is("li") || !$targetP.attr("value")) return false; if (!$targetP.hasClass("disabled") && !$targetP.hasClass("active")) { GotoPage($targetP.attr("value")); } }); $inputPageBtn.bind("click", function () { var numberPage = parseInt($inputPage.val()); if (isNaN(numberPage)) return false; GotoPage(numberPage); }); } else { $container.html(""); if(NoPageFun) NoPageFun(); } function GotoPage(numberPage) { numberPage = parseInt(numberPage);// 要跳转的页码 var maxNumber = parseInt($lastPage.attr("value"));// 最大页码 var oldNumber = parseInt($nextPage.attr("value")) - 1;// 当前页码 // 确保页码正确跳转 if (numberPage <= 0) numberPage = 1; else if (numberPage > maxNumber) numberPage = maxNumber; // 页码相同时不用操作 if (numberPage == oldNumber) return false; // 跳转前回调函数 if (BeforeFun && BeforeFun(numberPage) == false) return false; $inputPage.val(numberPage); // 功能按钮的开启与关闭 if (numberPage == 1) { $prePage.addClass("disabled"); $firstPage.addClass("disabled"); } else { $prePage.removeClass("disabled"); $firstPage.removeClass("disabled"); } if (numberPage == maxNumber) { $nextPage.addClass("disabled"); $nextPage.next().addClass("disabled"); } else { $nextPage.removeClass("disabled"); $nextPage.next().removeClass("disabled"); } // 开始跳转 // 修改上一页和下一页的值 $prePage.attr("value", numberPage - 1); $nextPage.attr("value", numberPage + 1); // 计算起始页码 var starPage = ComputeStartPage(numberPage, maxNumber); if (starPage == thisShowMinNumber) {// 要显示的页码是相同的 $thisPageNumber.removeClass("active"); $thisPageNumber = $container.find("li.commonNum").eq( numberPage - thisShowMinNumber); $thisPageNumber.addClass("active"); } else {// 需要刷新页码 CreatPageLi(starPage, numberPage, maxNumber); } // 跳转后回调函数 if (AfterFun) AfterFun(numberPage); } function ComputeStartPage(numberPage, maxPage) { var startPage; if (maxPage <= 10) startPage = 1; else { if ((numberPage - thisShowMinNumber) >= 7) {// 跳转到十页中的后三页或之后的页码时尽量显示后续页码 startPage = numberPage - 3; if (startPage + 9 > maxPage) startPage = maxPage - 9;// 边界修正 } else if ((numberPage - thisShowMinNumber) <= 2) {// 跳转到十页中的前三页或之前的页码时尽量显示更前页码 startPage = numberPage - 6; if (startPage <= 0) startPage = 1;// 边界修正 } else {// 不用改变页码 startPage = thisShowMinNumber; } } return startPage; } function CreatPageLi(page, activePage, maxPage) {// page:start page page = parseInt(page); activePage = parseInt(activePage); maxPage = parseInt(maxPage); var initStr = [], str; thisShowMinNumber = page;// 初始化变量 for (var i = 1; i <= maxPage && i <= 10; i++ , page++) { if (page == activePage) { initStr.push('<li class="commonNum active" value="' + page + '"><a href="javascript:">' + page + '</a></li>'); } else initStr.push('<li class="commonNum" value="' + page + '"><a href="javascript:">' + page + '</a></li>'); } str = initStr.join(""); $prePage.siblings(".commonNum").remove();// 去除原有页码 $prePage.after(str); $thisPageNumber = $container.find("li.commonNum.active");// 初始化变量 } } 参数说明：
$container：分页组件的容器，请确保这个容器只用来存放分页组件
totalPageNum,：页码总数
currentNum：当前页码，默认为1
BeforeFun,：在页码跳转之前调用的函数，可通过返回false来阻止页码跳转（可在此处使用ajax来加载内容）
AfterFun：再页码跳转之后调用的函数（也可在此处使用ajax来加载内容）
NoPageFun：当总页码为0时调用的函数
温馨提示：这段代码仍然有很多可以优化的地方