如何在jquery中使用pagination分页插件

这篇文章将为大家详细讲解有关如何在jquery中使用pagination分页插件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

目前创新互联建站已为1000多家的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、虎林网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css)

pagination插件下载地址

第二步:将分页条容器写到页面里(固定代码)


    
         

第三步:生成分页条方法是pagination,例如$("#page").pagination(100); 传入总数目

如何在jquery中使用pagination分页插件

例如:

$("#Pagination").pagination(json.data.count, {
   items_per_page:5,
   callback:pageselectCallback
});

如何在jquery中使用pagination分页插件

第四步:给分页加回调,点击第几页的请求写到回调函数里。

回调函数带参数: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分页插件
分享URL:http://azwzsj.com/article/ppjhdd.html