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 form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现穿梭框效果
Jan 19 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定时执行计划任务的多种方法小结
2011/12/19 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
2014年大学生党课心得体会范文
2014/03/29 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书