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 replace方法去空格
May 08 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
公司财务自我评价分享
2013/12/17 职场文书
简短证婚人证婚词
2014/01/09 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
介绍长城的导游词
2015/01/30 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers