jquery分頁插件pagination使用教程
更新時間：2018年10月23日 11:47:49 作者：李秀才
這篇文章主要為大家詳細介紹了jquery分頁插件pagination的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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); 傳入總數(shù)目
例如：
$("#Pagination").pagination(json.data.count, {
items_per_page:5,
callback:pageselectCallback
});
第四步：給分頁加回調，點擊第幾頁的請求寫到回調函數(shù)里。
回調函數(shù)帶參數(shù)：page_index（頁數(shù)索引，從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>發(fā)布于：</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>發(fā)布于：</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" >行業(yè)動態(tài)</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery pagination插件實現(xiàn)無刷新分頁代碼
- jquery分頁插件jquery.pagination.js使用方法解析
- jquery.pagination.js 無刷新分頁實現(xiàn)步驟分享
- jQuery EasyUI Pagination實現(xiàn)分頁的常用方法
- Jquery 分頁插件之Jquery Pagination
- jQuery Pagination分頁插件使用方法詳解
- jquery.pagination.js分頁使用教程
- jQuery pagination分頁示例詳解
相關文章
S2SH整合JQuery+Ajax實現(xiàn)登錄驗證功能實現(xiàn)代碼
登錄驗證,在項目開發(fā)中很常用的，尤其是這一塊非常有利于用戶體驗，感興趣的朋友可以參考下，或許對你學習登陸驗證有所幫助，好了閑話不多說了，看代碼2013-01-01
這篇文章主要介紹了jQuery同步提交實現(xiàn)方法,實例分析了jQuery基于ajax實現(xiàn)同步提交的具體技巧,以及jQuery版本更新的使用注意事項,需要的朋友可以參考下2015-12-12
基于jquery-resizable創(chuàng)建可調整大小的表(table)格
本文介紹如何基于jquery-resizable實現(xiàn)可調整表格(table)列寬的代碼,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)智能表單驗證操作的相關資料，利用jquery實現(xiàn)了對一個表單字段格式的即時檢查，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了jquery對象訪問是什么及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了jquery的幻燈片圖片切換效果，幻燈片圖片切換效果特別適合做產(chǎn)品演示，感興趣 的小伙伴可以參考下。2015-09-09
超簡單的jquery的AJAX用法,需要的朋友可以參考下。2010-05-05
JQuery實現(xiàn)的文字列表一條一條向上滾動的效果2013-11-11
jQuery Ajax 實例代碼 ($.ajax、$.post、$.get)
下面小編就為大家?guī)硪黄猨Query Ajax 實例代碼 ($.ajax、$.post、$.get)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
jQuery實現(xiàn)dialog設置focus焦點的方法
這篇文章主要介紹了jQuery實現(xiàn)dialog設置focus焦點的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06