jquery分页插件pagination使用教程

pagination使用起来非常的方便。第一步：引入分页需要的js（jquery.pagination.js）和css(pagination.c

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。