jQuery分页插件jquery.pagination.js使用方法解析


Posted in Javascript onFebruary 09, 2017

jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢;

jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo;

使用此插件,首先在页面(jsp、html)中引入其js、css文件

<link href="/自定义路劲/jquery.pagination/pagination.css" rel="external nofollow" rel="stylesheet">
<script src="/自定义路径/jquery.pagination/jquery.pagination.js" type="text/javascript"></script>

具体代码:

<html> 
 <body> 
  <div id="table"> 
   <div id="result"> 
    查询后的数据 
   </div> 
   <!--分页div,使用时,只需此部分即可--> 
   <div class="cl"> 
    <div class="pagination" id="pageDiv"></div><!--id自定义即可--> 
   </div> 
  </div> 
   
 <body> 
 <script> 
  // 创建分页 
  $("#pageDiv").pagination(${p.totalPage}, { 
   num_edge_entries: 1, //两侧显示的首尾分页的条目数 
   num_display_entries: 4, //连续分页主体部分显示的分页条目数 
   callback: function(){//回调函数, 
     //setLinkTo();//自定义函数:某种行为 
   }, 
   link_to: "#",//分页的链接 
   current_page: ${p.pageNo},//当前页 
   prev_text : "< 上一页",//自定义“上一页”标签 
   next_text : "下一页 >",//自定义“下一页”标签 
   first_text: "<i class='begin_page'>首页</i>", //是否显示首页按钮,默认为true; 
   last_text: "<i class='last_page'>末页</i>", //是否显示尾页按钮,默认为true; 
   items_per_page: ${p.pageSize}, //每页显示的条目数(pageSize) 
   toPage: false //是否显示跳转到第几页,默认是true; 
  }); 
 </script> 
</html>

由于其特有的分页逻辑,使用此插件时,需要谨慎,以免与应用后台的分页逻辑不符,引起不必要的二次开发。

对任何插件的使用都需灵活,取你所需即可:如当我们的应用已经使用了一种前端分页插件,但是喜欢jquery.pagination插件的样式,此时,我们只需使用其样式文件,再对原分页插件源码适当的调整即可。没有必要推翻我们原有的分页逻辑,为了满足插件而使用插件。而一定是为了满足我们而使用插件。

更多精彩内容请点击:jquery分页功能汇总进行学习。

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

Javascript 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
Bootstrap面板学习使用
Feb 09 #Javascript
详解js的异步编程技术的方法
Feb 09 #Javascript
原生JS实现简单放大镜效果
Feb 08 #Javascript
基于JavaScript实现本地图片预览
Feb 08 #Javascript
js 判断登录界面的账号密码是否为空
Feb 08 #Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 #Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
You might like
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python----数据预处理代码实例
2019/03/20 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Django 反向生成url实例详解
2019/07/30 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python requests接口测试实现代码
2020/09/08 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
18岁生日感言
2014/01/12 职场文书
上班玩手机检讨书
2014/02/17 职场文书
小学评语大全
2014/04/22 职场文书
给学校的建议书范文
2014/05/15 职场文书
刑事辩护词范文
2015/05/21 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python