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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
node内置调试方法总结
Feb 22 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
JS实现可控制的进度条
Mar 25 Javascript
javascript canvas封装动态时钟
Sep 30 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
php字符集转换
2017/01/23 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python正则捕获操作示例
2017/08/19 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python多任务及返回值的处理方法
2019/01/22 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
500行python代码实现飞机大战
2020/04/24 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
优乐美广告词
2014/03/14 职场文书
2014年教师节寄语
2014/04/03 职场文书
保护动物倡议书
2014/04/15 职场文书
市场营销战略计划书
2014/05/06 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
国王的演讲观后感
2015/06/03 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS