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 30 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
Javascript 强制类型转换函数
May 17 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
js实现简单图片拖拽效果
Feb 22 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 字符串操作入门教程
2006/12/06 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php输入数据统一类实例
2015/02/23 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Pandas的Apply函数具体使用
2020/07/21 Python
计算机大学生的自我评价
2013/10/15 职场文书
团队精神口号
2014/06/06 职场文书
学习十八大宣传标语
2014/10/09 职场文书
离婚协议书怎么写
2015/01/26 职场文书
会议邀请函
2015/01/30 职场文书
三好学生个人总结
2015/02/15 职场文书
政审证明材料
2015/06/19 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA