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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery表单验证之密码确认
May 22 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 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
GD输出汉字的函数的分析
2006/10/09 PHP
PHP4实际应用经验篇(7)
2006/10/09 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
学习ExtJS table布局
2009/10/08 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
python实现扫描ip地址的小程序
2019/04/16 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Django实现随机图形验证码的示例
2020/10/15 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
部队领导证婚词
2014/01/12 职场文书
军训自我鉴定100字
2014/02/13 职场文书
婚纱店策划方案
2014/05/22 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
委托书的样本
2015/01/28 职场文书
作弊检讨书范文
2015/05/06 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书