首页 > 代码库 > 分页插件汇总
分页插件汇总
jpaginate是基于jquery的分页插件,非常轻量,没有任何侵入性,当然所能做的也就非常少.事实上它的作用仅仅是提供一个好看的分页样式,只提供一个触发事件.但是轻量带来了巨大的灵活性,让它可以提供任何内容的分页服务.
官方网站为http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/,demo网站为http://tympanus.net/jPaginate/.
该项目好像到2009年就已经没人再更新了,但是仍然兼容现在的所有浏览器(目前还没测过IE10).因其源文件中有一点小错误,导致可能在看demo时,IE6,7,9可能会出现排版混乱的情况.这个情况是因为其判断浏览器版本的方式不对,具体代码为:
Js代码
- var bVer = navigator.appVersion;
- if(bVer.indexOf(‘MSIE 7.0‘) > 0)
- var ver = "ie7";
将其换成
Js代码
- var isIE = $.browser.msie;
- var bv = $.browser.version;
- if(isIE && bv == ‘7.0‘)
- var ver = "ie7";
就可以了.
在附件中,已经将其改正,并做了简单的汉化.
用法:
在JSP页面中为其定义一个DIV
Html代码
- <div id="pagination0">
- </div>
然后引入jquery.paginate.js文件即可.本插件依赖jquery,本次用的是1.7.1
然后为其初始化:
Js代码
- var pageSize = 10;
Js代码
- $(function(){
- $("#pagination0").paginate({
- count : ${pageNum}, //此处要写清本次分页的总页数,不支持动态改变,不可写非int型数.个人建议在进入页面的时候就把页数传过来
- start : 1, //开始页码,从1开始,一般设置成1 //本人在这里设置为动态变化,这样页面的下标就能当前页,变为选中状态。
- display : 7, //在分页条上显示的个数,分页数等于或超过本设置会显示设置的个数,不够的话会显示真实个数,不过就不会出现滚动效果了.
- border : false, //是否显示外框
- text_color : ‘#888‘, //文字颜色
- background_color : ‘#EEE‘, //背景颜色
- text_hover_color : ‘black‘, //鼠标放上去时文字的颜色
- background_hover_color : ‘#CFCFCF‘,//鼠标放上去时背景的颜色
- rotate : true, //是否滚动
- images : false, //
- mouse : ‘press‘, //可选值为‘press‘和‘slide‘,具体差别请自己体验.
- onChange : function(page){//本插件唯一可触发的事件,在点击页数的时候触发,只传过来当前被选中的页数,我想这其实足够了.
- list(page-1,pageSize);
- //这里它使用的是函数,但本人不知道这个函数现在哪里,因为我写在哪里系统都报错,好在我不需要异步,直接通过window.loaction.href 跳转。直接传入pageNum即可。
- }
- });
- list(0,pageSize);
- });
上面的list 方法是自己写的异步取数据的方法,亲们可自己实现自己的代码.以下列出list代码,仅供参考,请结合各自业务来完成自己的功能.
//下面这个list函数,本人放在哪里都报错。不知道为什么?
Js代码
- function list(start, size){
- $.ajax({
- url:"${ctx}/page.do?action=list",
- type:"post",
- data:{start:start,size:size},
- dataType:"json",
- timeout: 10000,
- error: function(){alert(‘请求超时,请稍候再试‘);},
- success: function(result){
- var s = new StringBuffer();
- $.each(result,function(index,value){
- s.append("<tr>").append("<td>").append(value.NAME).append("</td>");
- s.append("<td>").append(value.MONEY).append("</td>").append("<td>");
- s.append(value.UNIT).append("</td>").append("<td>");
- s.append("<a href=‘#‘ onclik=\"javascript:modify(‘").append(value.ID);
- s.append("‘)\">操作</a>").append("</td>").append("</tr>");
- });
- $("#mytbody").html(s.toString());
- }
- });
- }
顺带说一下,默认的样式是 first last 等,我们自己可以根据需要,在其提供的样式表中做修改
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。