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 面向对象编程基础:继承
Aug 21 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
深入研究React中setState源码
2017/11/17 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
python操作日期和时间的方法
2014/03/11 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python日志器使用方法及原理解析
2020/09/27 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
最新教师自我评价分享
2013/11/12 职场文书
2013的个人自我评价
2013/12/26 职场文书
户外婚礼策划方案
2014/02/08 职场文书
应聘英语教师求职信
2014/04/24 职场文书
通信工程求职信
2014/07/16 职场文书
干部作风建设工作总结
2014/10/29 职场文书
干部年终考核评语
2015/01/04 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
高三英语教学反思
2016/03/03 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby