Bootstrap分頁組件

之前我曾寫過一篇關于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時調用的函數

溫馨提示：這段代碼仍然有很多可以優化的地方

來自： http://my.oschina.net/hwxn/blog/553034