一款Jquery 分页插件的改造方法(服务器端分页)

2020-05-24 21:31:04易采站长站整理

.pagination li.jumpto .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;}
.pagination li.jumpto .goto { float:left; display:block; overflow:hidden; width:16px; height:19px; border:0; text-indent:-1000px; background:url(images/pagination/pagination_goto.gif) no-repeat; cursor:pointer;}

我看CSS也头疼,这个是我找一个朋友写的,自己又改了改
接下来讲讲使用方法:
首先 指定自己分页模板的路径 DWZ.init(“js/pagination.xml”); 然后调用分页:

$(function(){
$(“div.pagination”).each(function () {
var $this = $(this);
$this.pagination({
totalCount: $this.attr(“totalCount”),
numPerPage: $this.attr(“numPerPage”),
pageNumShown: $this.attr(“pageNumShown”),
currentPage: $this.attr(“currentPage”)
});
});
});

这里为什么用each呢,为啥不直接$(“div.pagination”).pagination({})呢,大家应该想到了,有挺多时候用户喜欢在列表的上下都放分页便于操作,这两块js其实可以单独放一个文件,需要用到分页的文件引用即可,因为程序真正用到的是web和服务器端交换所关心的数据,totalCount numPerPage pageNumShown currentPage ,之前所做的所有都只是实现好用通用的框架。现在无需改动的东西都做好了,怎么实现交互呢,很简单:点击页码或者选择每页显示下拉框或者点击go按钮时候都会触发一个自定义函数 PageBreak ,这个函数内部就大家想实现什么具体去写,例如

function PageBreak(args) {
alert(args[“pageNum”]||args[“numPerPage”]);
}

在这里面可以用js取得当前的totalCount numPerPage pageNumShown curren,和页面上筛选的form的值一并ajax提交给后端页面,然后接收返回的数据,加载到指定位置,并且注意给<div class=”pagination” >这个DIV的自定义属性重新赋值然后调用一下pagination方法即可,不知道写清楚没有,先去吃饭了,如果有问题可以留言,如果不清楚具体使用的人多,打算后续写两种用法,一种是返回数据直接返回这个div的,一个是只返回表单中行数据和div的4个自定义属性,然后js动态赋值的