当前位置:首页 > 日记 > 正文

jQuery分页插件jquery.pagination.js使用方法解析

jQuery分页插件jquery.pagination.js使用方法解析

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分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

node.js 利用流实现读写同步,边读

node.js 利用流实现读写同步,边读

读写,方法,同步,电脑软件,node,如下所示://10个数 10个字节,每次读4b,写1blet fs=require("fs");function pipe(source,target) { //先创建可读流,再创建可写流 //先读一次,rs.on(data) //将读到的类容写入目标中 ,返回布尔值,如果是ture,继…

ie下js不执行的几种可能

ie下js不执行的几种可能

不执行,几种,电脑软件,js,1、首先考虑的就是代码是否有报错2、其次搜索代码中是否有console.log等测试的代码3、检查所用的方法是否兼容ie以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!…

javascript闭包功能与用法实例分析

javascript闭包功能与用法实例分析

实例分析,闭包,功能,电脑软件,javascript,本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:理解闭包闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化…

在Word2007中怎样设置默认表格样式

在Word2007中怎样设置默认表格样式

设置,默认,样式,表格,电脑软件,  默认情况下,在Word2007中插入的表格均默认使用普通样式。用户可以将表格样式库中最常用的表格样式作为默认样式,使新插入的表格都使用该样式。以下是小编为您带来的关于在Word2007中设置默认表格样式,希望对…

JQ文件上传之前预览功能的简单实例

JQ文件上传之前预览功能的简单实例

简单实例,分享,文件上传,功能,电脑软件,1、先准备一个divonchange触发事件<input type="file" onchange="preview(this)" ></span><div id="preview"></div>2、写JS代码//上传图片之前预览图片function preview(file){if (file.files…

在Word2007文档中怎么设置剪贴画棱

在Word2007文档中怎么设置剪贴画棱

文档,设置,效果,剪贴画,电脑软件,  在Word2007文档中,用户可以为剪贴画设置棱台效果,从而实现剪贴画的多种立体化效果,例如棱纹、斜面、凸起等棱台效果。以下是小编为您带来的关于在Word2007文档中设置剪贴画棱台效果,希望对您有所帮助。在Wo…

ES6中Array.find | 和findIndex |

ES6中Array.find | 和findIndex |

函数,详解,电脑软件,Array,findIndex,ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找…

js字符限制 | 字符截取 一个中文汉

js字符限制 | 字符截取 一个中文汉

字符,字符截取,中文,汉字,两个,html<input type="text" id="txt">核心js代码//字符串截取function getByteVal(val, max) {var returnValue = '';var byteValLen = 0;for (var i = 0; i < val.length; i++) {if (val[i].match(/[^\x…

如何给photoshop安装新的字体

如何给photoshop安装新的字体

安装,字体,方法,电脑软件,photoshop,  给photoshop安装新的字体,也是为了我们可以用到更多不同的字体。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于如何给photoshop安装新的字体,供您参阅。给photoshop安装新的字体的方法…

javascript基础练习之翻转字符串与

javascript基础练习之翻转字符串与

回文字符串,字符串,基础,回文,电脑软件,翻转字符串翻转字符串(Reverse a String),就是把字符串倒序处理的意思,比如给定一个字符串”hello”,翻转后应该返回”olleh”。测试用例reverseString("hello") 应该返回 “olleh” reverseString(…

php array_reverse 以相反的顺序返

php array_reverse 以相反的顺序返

实例代码,数组,顺序,电脑软件,php,php array_reverse函数返回一个单元顺序相反的数组,该函数有两个参数,第一个参数表示需要处理的数组,第二个参数可选,规定是否保留原始数组的键名。本文章通过实例向大家讲解array_reverse函数的使用方法。需…

怎么查看微信圈的收藏

怎么查看微信圈的收藏

收藏,电脑软件,微信圈,  当我们在微信朋友圈发现可读的值得保存的内容,我们会选择收藏起来,可是收藏起来的东西在哪里可以查看到呢?如果你不知道微信怎么查看收藏,可以看看下面的具体操作。微信圈查看收藏的方法1.打开微信,点击右下角的【我…