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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jQuery示例收集
Nov 05 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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 !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
JS实现网页时钟特效
2020/03/25 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Python的面向对象思想分析
2015/01/14 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python通过http下载文件的方法详解
2019/07/26 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
python中什么是面向对象
2020/06/11 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
酒店总经理助理职责
2014/02/12 职场文书
会计专业自我评价
2014/02/12 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
社区党支部承诺书
2015/04/29 职场文书
银行工作心得体会范文
2016/01/23 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书