当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery分页插件pagination使用教程

jquery分页插件pagination使用教程

2019年06月02日  | 移动技术网IT编程  | 我要评论

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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网