jquery分頁插件pagination使用教程

更新時間：2018年10月23日 11:47:49 作者：李秀才

這篇文章主要為大家詳細介紹了jquery分頁插件pagination的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下

pagination使用起來非常的方便。

第一步：引入分頁需要的js（jquery.pagination.js）和css(pagination.css)

第二步：將分頁條容器寫到頁面里（固定代碼）

<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 ajax屬性async(同步異步)示例
在jquery的ajax中如果我們希望實現(xiàn)同步或者異步我們可以直接設置async發(fā)生為真或假即可true false，下面舉幾個jquery ajax同步和異步實例
2013-11-11
jQuery特殊符號轉義的實現(xiàn)
下面小編就為大家?guī)硪黄猨Query特殊符號轉義的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jQuery簡單實現(xiàn)中間浮窗效果
這篇文章主要介紹了jQuery簡單實現(xiàn)中間浮窗效果,涉及jQuery事件響應及動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
2016-09-09
jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標拖拽滑動效果來選擇數(shù)字的方法,涉及jQuery鼠標事件的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-05-05
推薦一款jQuery插件模板
這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧
2015-01-01
jQuery封裝animate.css的實例
下面小編就為大家分享一篇jQuery封裝animate.css的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
jQuery中add()方法用法實例
這篇文章主要介紹了jQuery中add()方法用法,實例分析了add()方法的功能、定義及匹配元素中添加與表達式匹配的元素使用技巧,需要的朋友可以參考下
2015-01-01
jquery添加div實現(xiàn)消息聊天框
這篇文章主要為大家詳細介紹了jquery添加div實現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
同域jQuery(跨)iframe操作DOM(示例代碼)
這篇文章主要是對同域jQuery(跨)iframe操作DOM的示例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery基于toggle實現(xiàn)click觸發(fā)DIV的顯示與隱藏問題分析
這篇文章主要介紹了jQuery基于toggle實現(xiàn)click觸發(fā)DIV的顯示與隱藏,結合實例形式分析了toggle方法用于切換頁面元素樣式的相關使用技巧,需要的朋友可以參考下
2016-06-06