jquery分页插件pagination使用教程

2019-11-19 12:38:34

字体：大中小

来源：转载

供稿：网友

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); 传入总数目

例如：

$("#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>

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

上一篇：vue项目使用微信公众号支付总结及遇到的坑

下一篇：使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)