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之排序组件的深入解析
Jun 19 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
js propertychange和oninput事件
Sep 28 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
javascript canvas检测小球碰撞
Apr 17 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
语义化 H1 标签
2008/01/14 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
selenium如何定位span元素的实现
2021/01/13 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
PHP经典面试题
2016/09/03 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
幼儿园实习自我鉴定
2013/12/15 职场文书
经典大学生求职信范文
2014/01/06 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python