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中的几个运算符
Jun 29 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
JS倒计时实例_天时分秒
2017/08/22 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python函数和模块的使用总结
2019/05/20 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
会计求职信范文
2014/05/24 职场文书
支部组织生活会方案
2014/06/10 职场文书
《黄道婆》教学反思
2016/02/22 职场文书