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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
庆八一活动方案
2014/01/25 职场文书
增值税发票丢失证明
2015/06/19 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server