精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
如何在jquery中使用pagination分页插件
这篇文章将为大家详细讲解有关如何在jquery中使用pagination分页插件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
目前创新互联建站已为1000多家的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、虎林网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
第一步：引入分页需要的js（jquery.pagination.js）和css(pagination.css)
pagination插件下载地址
第二步：将分页条容器写到页面里（固定代码）
第三步：生成分页条方法是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 = "" + json.data.list[i].title +
"" + articContent + "" +
"" +
"" + create_Time + "
";
$("#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 = '共' + json.data.totalPage + '页';
$("#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 = "" + json.data.list[i].title +
"" + articContent + "" +
"" +
"" + create_Time + "
";
$("#list_container").append(articObj);
}
}
} else if (json.code == 0) {}
}
});
} html代码：
首页 > 行业动态
关于如何在jquery中使用pagination分页插件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
当前标题：如何在jquery中使用pagination分页插件
地址分享：http://cdkjz.cn/article/ppjhdd.html
