jquery分页插件pagination使用教程


Posted in jQuery onOctober 23, 2018

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

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 = "<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 #jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP生成便于打印的网页
2006/10/09 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python pass 语句使用示例
2014/03/11 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
PyTorch中的C++扩展实现
2020/04/02 Python
django 外键创建注意事项说明
2020/05/20 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
为什么要使用servlet
2016/01/17 面试题
留学推荐信怎么写
2014/01/25 职场文书
师德个人剖析材料
2014/02/02 职场文书
道路施工安全责任书
2014/07/24 职场文书
2014年协会工作总结
2014/11/22 职场文书
地震慰问信
2015/02/14 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL