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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
jQuery实现滚动效果
Nov 17 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
JavaScript实现简单日历效果
Sep 11 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
php 数据结构之链表队列
2017/10/17 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
二年级数学教学反思
2014/01/21 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
完整版商业计划书
2014/09/15 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL