pagination使用起來非常的方便。
第一步：引入分頁需要的js（jquery.pagination.js）和css(pagination.css)
pagination插件下載地址
第二步：將分頁條容器寫到頁面里（固定代碼）
<div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchPage" name="searchPage"> </div></div>
第三步：生成分頁條方法是pagination，例如$("#page").pagination(100); 傳入總數目
例如：
$("#Pagination").pagination(json.data.count, { items_per_page:5, callback:pageselectCallback});
第四步：給分頁加回調，點擊第幾頁的請求寫到回調函數里。
回調函數帶參數：page_index（頁數索引，從0開始，第一頁index為0），此值插件自動傳入。
jquery分頁插件pagination示例（ajax應用）示例：
javascript代碼：
var sessionStorage = window.sessionStorage; var aid = (JSON.parse(sessionStorage.getItem("user"))).id;var articObj = "";var articContent = "";var pageObj = "";data["pageSize"] = 5;data["pageNow"] = 1; function getMyArtic() { if (userIdid == "aid") { data["aid"] = aid; } else { data["userId"] = aid; } if (document.getElementById("searchTime").value == "") { document.getElementById("searchTime").value = myDate.toLocaleDateString(); } data["createTime"] = document.getElementById("searchTime").value; jQuery.support.cors = true; $.ajax({ url: serverAddress, xhrFields: { withCredentials: true }, crossDomain: true, async: true, cache: false, type: "post", dataType: "json", data: data, success: function(json) { $("#Pagination").empty(); $("#list_container").empty(); $("#searchPage").empty(); if (json.code == 1) { sessionStorage.setItem("artic", JSON.stringify(json.data)); if (json.data.recordCount > 0) { for (var i = 0; i < json.data.recordCount; i++) { articContent = json.data.list[i].content; var regEx = /<[^>]*>/g; articContent = articContent.replace(regEx, ""); if (articContent.length > 100) { articContent = articContent.substring(0, 100) + "..."; } var create_Time = json.data.list[i].createTime; if (create_Time != null || create_Time != "") { create_Time = create_Time.substring(0, 19); } articObj = "<div class=/"list/"><div class=/"title_list/"><label class=/"pre blue/"><a onclick='clickHref(this.href)' id=/"goto" + json.data.list[i].id + "/" class=/"pre blue/" href=/"/" /">" + json.data.list[i].title + "</a></label></div><div class=/"content/">" + articContent + "</div>" + "<div class=/"show_last/"><div class='img_delete'><img class='img_delete' alt=/"刪除/" title=/"刪除/" src=/"image/lajixiang_03.png/" href=/"#/" onclick=/"deleteArticle(" + json.data.list[i].id + ");/"/></div>" + "<div><label>發布于：</label><label class=/"blue/">" + create_Time + "</label></div></div></div>"; $("#list_container").append(articObj); // alert(userIdid) var gotoId = "goto" + json.data.list[i].id; if (userIdid == "userId") { //收藏的文章 document.getElementById(gotoId).href = "ArticleDetail.html?id=" + json.data.list[i].id; $(".img_delete").css("display", "none"); } else if (userIdid == "aid") { //我的文章 $(".img_delete").css("display", "block"); document.getElementById(gotoId).href = "editArticle.html?id=" + json.data.list[i].id; } } pageObj = '<span class="page-sum">共<strong class="allPage">' + json.data.totalPage + '</strong>頁</span>'; $("#searchPage").append(pageObj); $("#Pagination").pagination(json.data.count, { items_per_page: 5, //pageSize每頁最多顯示多少條 callback: pageselectCallback }); } reSetIframeHeight(); } else if (json.code == 0) {} } }); } window.onload = function() { getMyArtic(); personalityCenterRefresh(); } function pageselectCallback(page_index) { var createTime = document.getElementById("searchTime").value; if (createTime.length == 0 || createTime == null) { createTime = myDate.toLocaleDateString(); } if (userIdid == "aid") { data["aid"] = aid; } else { data["userId"] = aid; } data["pageNow"] = parseInt(page_index) + 1; jQuery.support.cors = true; $.ajax({ url: serverAddress, xhrFields: { withCredentials: true }, crossDomain: true, async: true, cache: false, type: "post", dataType: "json", data: data, success: function(json) { $("#list_container").empty(); if (json.code == 1) { if (json.data.recordCount > 0) { sessionStorage.setItem("artic", JSON.stringify(json.data)); for (var i = 0; i < json.data.recordCount; i++) { articContent = json.data.list[i].content; //alert(articContent); var regEx = /<[^>]*>/g; articContent = articContent.replace(regEx, ""); if (articContent.length > 100) { articContent = articContent.substring(0, 100) + "..."; } var create_Time = json.data.list[i].createTime; if (create_Time != null || create_Time != "") { create_Time = create_Time.substring(0, 19); } articObj = "<div class=/"list/"><div class=/"title_list/"><label class=/"pre blue/"><a class=/"pre blue/" href=/"#/" onclick=/"javascript:location.href='editArticle.html?id=" + json.data.list[i].id + "'/">" + json.data.list[i].title + "</a></label></div><div class=/"content/">" + articContent + "</div>" + "<div class=/"show_last/"><div><img alt=/"刪除/" title=/"刪除/" src=/"image/lajixiang_03.png/" href=/"#/" onclick=/"deleteArticle(" + json.data.list[i].id + ");/"/></div>" + "<div><label>發布于：</label><label class=/"blue/">" + create_Time + "</label></div></div></div>"; $("#list_container").append(articObj); } } } else if (json.code == 0) {} } }); } html代碼：
<body> <div class="list" id="mid"> <div class="news"> <div id="trend_top"> 首頁 > <a href="#" rel="external nofollow" >行業動態</a> </div> <div id="div_mid"> </div> <div id="bottom_page"> <div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchPage" name="searchPage"> </div> </div> </div> </div> </div></body>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
