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 相关文章推荐
popdiv
Jul 14 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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抓即时股票信息
2006/10/09 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
基于JavaScript创建动态Dom
2015/12/08 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
domReady的实现案例
2016/11/23 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python操作mysql数据库
2017/03/05 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
求职信内容考虑哪几点
2013/10/05 职场文书
社区党员先进事迹
2014/01/22 职场文书
个人委托书格式
2014/04/04 职场文书
中秋晚会策划方案
2014/06/12 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
python3中apply函数和lambda函数的使用详解
2022/02/28 Python