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 相关文章推荐
javascript concat数组累加 示例
Sep 03 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
javascript常用功能汇总
Jul 05 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
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
一个用于网络的工具函数库
2006/10/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python画图高斯分布的示例
2019/07/10 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
python支持多继承吗
2020/06/19 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python爬取微博评论的实例讲解
2021/01/15 Python
Python学习之time模块的基本使用
2021/01/17 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
校园达人秀策划书
2014/01/12 职场文书
大学毕业自我评价
2014/02/02 职场文书
2014年政协工作总结
2014/12/09 职场文书
继续教育个人总结
2015/03/03 职场文书
2015年工程部工作总结
2015/04/30 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python