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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现广告上下滚动效果
Mar 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
php发送html格式文本邮件的方法
2015/06/10 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
军训个人总结
2015/03/03 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
金榜题名主持词
2015/07/02 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
创业计划书之美甲店
2019/09/20 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js