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压缩工具:X2JSCompactor
Jun 13 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Sea.JS知识总结
2016/05/05 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
深入了解js原型模式
2019/05/30 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
秘书岗位职责
2013/11/18 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python