實用jQuery分頁特效插件jquery.pagination.js，基于jQuery實現，可根據pageselectCallback函數callback調用通過ajax調用動態數據，目前的方法是生成JSON數據到JS文件，調用的數據是JSON格式數據，缺點是數據是一次性讀出來的，效率會差些，插件支持眾多參數的自定義配置功能，還是很不錯的，大家可以根據自己的想法進行改進。
有同學問道jquery的簡單分頁插件，原來有同事寫過一個簡單[Javascript 使用回調函數的自定義分頁插件--自帶樣式]。
今天分享一個功能比較強大的jquery分頁插件：jquery.pagination。
 |
 |
還有一點值得一提的是分頁列表需要放在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>社區</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> '; 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> '; html = html + ' </td></tr>'; }); $("#tBodyList").html(html); //設置分頁 if (currentPage == 1) { var initPagination = function () { // 創建分頁 $("#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的全部敘述，希望大家喜歡。
新聞熱點
疑難解答
