疯狂学习吧
我们和您一起学习

jquery分页插件pagination使用教程

这篇文章主要为大家详细介绍了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); 传入总数目

例如:

$("#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="" + json.data.list[i].id;
    $(".img_delete").css("display", "none");
    } else if (userIdid=="aid") { //我的文章
    $(".img_delete").css("display", "block");
    document.getElementById(gotoId).href="" + 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='" + 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持疯狂学习吧。

赞(0)
未经允许不得转载:疯狂学习吧-FKXX8.com » jquery分页插件pagination使用教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

疯狂惊喜

关于我们APP