實用jQuery分頁特效插件jquery.pagination.js，基于jQuery實現，可根據pageselectCallback函數callback調用通過ajax調用動態(tài)數據，目前的方法是生成JSON數據到JS文件，調用的數據是JSON格式數據，缺點是數據是一次性讀出來的，效率會差些，插件支持眾多參數的自定義配置功能，還是很不錯的，大家可以根據自己的想法進行改進。

有同學問道jquery的簡單分頁插件，原來有同事寫過一個簡單[Javascript 使用回調函數的自定義分頁插件--自帶樣式]。

今天分享一個功能比較強大的jquery分頁插件：jquery.pagination。

官方地址：http://esimakin.github.io/twbs-pagination/

簡介與說明

此Jquery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數據量較大不建議用此方法，因為加載會比較慢。

原插件CSS不太合理，使用浮動，故無法方便實現左右方向的定位，且未清除浮動，在中文修改版中我對其進行了優(yōu)化，使其支持text-align的定位。

對原js文件注釋進行了中文翻譯，demo頁面也是漢化了的，demo頁面的js與原demo有一些出入，但核心不變。

使用方法

跟一般的jQuery插件一樣，此插件使用也很簡單便捷。方法是pagination，例如$("#page").pagination(100);，這里的100參數是必須的，表示顯示項目的總個數，這是最簡單的使用，得到的顯示如下：

還有一點值得一提的是分頁列表需要放在class類為pagination的標簽內，您可以使用text-align屬性控制分頁居中顯示還是居右顯示。

回調函數一般用來裝載對應分頁顯示的內容，具體參見demo源文件。

參數

使用舉例

例如下面的使用代碼：

$("#Pagination").pagination(56, {
  num_edge_entries: 2,
  num_display_entries: 4,
  callback: pageselectCallback,
  items_per_page:1
});

項目demo：

定義分頁相關參數：

var pageSize = 10;
var allCount = 0;
var currentPage = 1;
var ajaxUrl = '../../Service/ActiceHandler.ashx';
var oper = "list";

html:

  <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                 <thead>
                   <tr> 
                    <th>編號</th>
                    <th>標題</th>
                     <th>縮略圖</th> 
                         <th>海報</th>
               <%--     <th>社區(qū)</th>
                    <th>商品</th>--%>
                    <th>開始時間</th>
                    <th>結束時間</th>
                    <th>是否幻燈</th>
                    <th>操作</th>
                  </tr>
                 </thead>
                <tbody id="tBodyList">
                </tbody>
              </table>
              <div id="Pagination" class="row"></div>

獲取數據并調用分頁函數：

function GetList(pageIndex) {
  var searchName = $("#txtSearchName").val();
  var cityId = GetCity();
  var endTime;
  var beginTime;
  var communityName;
  var title;
  $.ajax({
    type: "post",
    dataType: 'json',
    url: ajaxUrl,
    data: {
      pageSize: pageSize,
      Operate: "list",
      currentPageIndex: pageIndex,
      endTime: $("#txtDeadTime").val(),
      Cityid: cityId,
      beginTime: $("#txtStartTime").val(),
      communityName: $("#txtsqname").val(),
      title: $("#txttitle").val()
    },
    success: function (data, textStatus) {
      if (data != null) {
        var model = eval(data);
        if (model != null && model != "undefined") {
          var data = eval(model.Instance);
          allCount = model.TotalCount;
          var html = '';
          ListActive = data;
          $.each(data, function (key, val) {
            html = html + '<tr>';
            html = html + ' <td width="100px" class="text-primary">' + val.id + '</td>';
            html = html + ' <td class="left">' + val.title + '</td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="' + val.smallphotourl + '"></img></td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="' + val.bigphotourl + '"></img></td>'; 
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.begintime) + '</td>';
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.endtime) + '</td>';
            html = html + ' <td class="left">' + '<a href="#modal-form" onclick="SetHomeIndex(\'' + val.id + '\',\'' + val.title
              + '\');return false" class="btn btn-xs btn-success " data-toggle="modal"><i class="icon-key"></i>首頁幻燈設置</a>' + '</td>';
            html = html + ' <td class="left">'; 
            if (oper == "list") {
              html = html + ' <a href="Add.aspx?RightID=0&Id=' + val.id + '" class="green" title="編輯"><i class="icon-edit bigger-130"></i></a>&nbsp;';
              html = html + ' <a href="#" onclick="DeleteActive(\'' + val.id + '\',\'' + val.title + '\')" class="red" title="注銷">';
              html = html + ' <i class="icon-trash bigger-130"></i></a>';
            }
            else if (oper == "msg") { 
              html = html + '  <input type="checkbox" onchange=\'SetCheckedPro("' + val.id + '","' + val.title + '");return false;\' id="seelctactive_' + val.id + '" value="' + val.title + '" />';
            }
            html = html + ' <a href="#" onclick="PreviewUrl(\'http://sq.huilife.cn/index.php?g=Wap&m=Homeactivity&de<a  class="keylink" title=" Bug修復" target="_blank">bug</a>=1&a=show&id=' + val.id + '\')" class="blue" title="查看"><i class="icon-zoom-in bigger-130"></i></a>&nbsp;';
            html = html + ' </td></tr>'; 
          });
          $("#tBodyList").html(html);
          //設置分頁
          if (currentPage == 1) {
            var initPagination = function () {
              // 創(chuàng)建分頁
              $("#Pagination").pagination(allCount, {
                num_edge_entries: 1, //邊緣頁數
                num_display_entries: 2, //主體頁數
                prev_text: "<<",
                next_text: ">>",
                callback: PageSelectCallback,
                items_per_page: pageSize //每頁顯示1項
              });
            }();
            currentPage = 100;
            if (allCount == 0) $('#divNumInfo').html("0-0條 共0條");
          }
        }
        else {
          alert("加載數據失??！"); return;
        }
      }
    },
    complete: function (XMLHttpRequest, textStatus) {
    },
    error: function (e) {
      alert("加載數據錯誤！"); return;
    }
  });
}

示例二：

Jquery Pagination插件代碼：

<div id="page2" class="m-pagination"></div>
<script type="text/javascript">
//請求格式： .../GetPageData?query=test&pageIndex=0&pageSize=10
//返回數據： {"data":[1,2,3,4,5,6,7,8,9,10],"total":800}
$("#page2").page({
  remote: {
    url: '/GetPageData', //請求地址
    params: { query: "test" },    //自定義請求參數
    beforeSend: function(XMLHttpRequest){
      //...
    },
    success: function (result, pageIndex) {
      //回調函數
      //result 為 請求返回的數據，呈現數據
    },
    complete: function(XMLHttpRequest, textStatu){
      //...
    }
    pageIndexName: 'pageIndex',   //請求參數，當前頁數，索引從0開始
    pageSizeName: 'pageSize',    //請求參數，每頁數量
    totalName: 'total'       //指定返回數據的總數據量的字段名
  }
});
</script>

以上內容是本文針對Jquery 分頁插件之Jquery Pagination的全部敘述，希望大家喜歡。

您可能感興趣的文章: