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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
vue瀑布流组件实现上拉加载更多
Mar 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 不使用js实现页面跳转
2014/02/11 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
Python 命令行参数sys.argv
2008/09/06 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python实现二分查找算法
2020/09/18 Python
Python创建自己的加密货币的示例
2021/03/01 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
地方课程教学计划
2015/01/19 职场文书
运动会开幕词
2015/01/28 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
Python实现双向链表
2022/05/25 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android