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获取鼠标点击的位置实现思路及代码
May 09 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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中显示数组与对象的实现代码
2011/04/18 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
python编程线性回归代码示例
2017/12/07 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Django添加feeds功能的示例
2018/08/07 Python
Python中format()格式输出全解
2019/04/12 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
简单了解Python write writelines区别
2020/02/27 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
关于运动会的稿件
2014/02/02 职场文书
公司股东出资证明书
2014/11/01 职场文书
优秀团员自我评价
2015/03/10 职场文书
慈善献爱心倡议书
2015/04/27 职场文书