jquery插件pagination实现无刷新ajax分页
1、前台使用ajax无刷新分页，主要需要生成分页的工具条，这里使用的是jquery.pagination.js
插件参数可以参考----张龙豪-jquery.pagination.js分页
下面贴出代码
/**
*ThisjQueryplugindisplayspaginationlinksinsidetheselectedelements.
*
*@authorGabrielBirke(birke*at*d-scribe*dot*de)
*@version.
*@param{int}maxentriesNumberofentriestopaginate
*@param{Object}optsSeveraloptions(seeREADMEfordocumentation)
*@return{Object}jQueryObject
*/
jQuery.fn.pagination=function(maxentries,opts){
opts=jQuery.extend({
items_per_page:,
num_display_entries:,
current_page:,
num_edge_entries:,
link_to:"#",
prev_text:"Prev",
next_text:"Next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){returnfalse;}
},opts||{});
returnthis.each(function(){
/**
*计算最大分页显示数目
*/
functionnumPages(){
returnMath.ceil(maxentries/opts.items_per_page);
}
/**
*极端分页的起始和结束点，这取决于current_page和num_display_entries.
*@返回{数组(Array)}
*/
functiongetInterval(){
varne_half=Math.ceil(opts.num_display_entries/);
varnp=numPages();
varupper_limit=np-opts.num_display_entries;
varstart=current_page>ne_half?Math.max(Math.min(current_page-ne_half,upper_limit),):;
varend=current_page>ne_half?Math.min(current_page+ne_half,np):Math.min(opts.num_display_entries,np);
return[start,end];
}
/**
*分页链接事件处理函数
*@参数{int}page_id为新页码
*/
functionpageSelected(page_id,evt){
current_page=page_id;
drawLinks();
varcontinuePropagation=opts.callback(page_id,panel);
if(!continuePropagation){
if(evt.stopPropagation){
evt.stopPropagation();
}
else{
evt.cancelBubble=true;
}
}
returncontinuePropagation;
}
/**
*此函数将分页链接插入到容器元素中
*/
functiondrawLinks(){
panel.empty();
varinterval=getInterval();
varnp=numPages();
//这个辅助函数返回一个处理函数调用有着正确page_id的pageSelected。
vargetClickHandler=function(page_id){
returnfunction(evt){returnpageSelected(page_id,evt);}
}
//辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
varappendItem=function(page_id,appendopts){
page_id=page_id<?:(page_id<np?page_id:np-);//规范pageid值
appendopts=jQuery.extend({text:page_id+,classes:""},appendopts||{});
if(page_id==current_page){
varlnk=jQuery("<ahrefclass='currentPage'>"+(appendopts.text)+"</a>");
}else{
varlnk=jQuery("<a>"+(appendopts.text)+"</a>")
.bind("click",getClickHandler(page_id))
.attr('href',opts.link_to.replace(/__id__/,page_id));
}
if(appendopts.classes){lnk.addClass(appendopts.classes);}
panel.append(lnk);
}
//产生描述
panel.append("<span>共有"+maxentries+"条记录，当前第<b>"+(current_page+)+"</b>/"+np+"页</span>");
//产生"Previous"-链接
if(opts.prev_text&&(current_page>||opts.prev_show_always)){
appendItem(current_page-,{text:opts.prev_text,classes:"prev"});
}
//产生起始点
if(interval[]>&&opts.num_edge_entries>)
{
varend=Math.min(opts.num_edge_entries,interval[]);
for(vari=;i<end;i++){
appendItem(i);
}
if(opts.num_edge_entries<interval[]&&opts.ellipse_text)
{
jQuery("<ahref>"+opts.ellipse_text+"</a>").appendTo(panel);
}
}
//产生内部的些链接
for(vari=interval[];i<interval[];i++){
appendItem(i);
}
//产生结束点
if(interval[]<np&&opts.num_edge_entries>)
{
if(np-opts.num_edge_entries>interval[]&&opts.ellipse_text)
{
jQuery("<ahref>"+opts.ellipse_text+"</a>").appendTo(panel);
}
varbegin=Math.max(np-opts.num_edge_entries,interval[]);
for(vari=begin;i<np;i++){
appendItem(i);
}
}
//产生"Next"-链接
if(opts.next_text&&(current_page<np-||opts.next_show_always)){
appendItem(current_page+,{text:opts.next_text,classes:"next"});
}
}
//从选项中提取current_page
varcurrent_page=opts.current_page;
//创建一个显示条数和每页显示条数值
maxentries=(!maxentries||maxentries<)?:maxentries;
opts.items_per_page=(!opts.items_per_page||opts.items_per_page<)?:opts.items_per_page;
//存储DOM元素，以方便从所有的内部结构中获取
varpanel=jQuery(this);
//获得附加功能的元素
this.selectPage=function(page_id){pageSelected(page_id);}
this.prevPage=function(){
if(current_page>){
pageSelected(current_page-);
returntrue;
}
else{
returnfalse;
}
}
this.nextPage=function(){
if(current_page<numPages()-){
pageSelected(current_page+);
returntrue;
}
else{
returnfalse;
}
}
//所有初始化完成，绘制链接
drawLinks();
//回调函数
//opts.callback(current_page,this);
});
}
代码还是比较容易看明白的，可以根据自己需要修改，这里使用的是自己的样式
样式代码
.pages{display:inline-block;overflow:hidden;padding:px;text-align:center;width:%;margin:px;}
.pagesb{color:#ef;}
.pagesa{color:#;border:pxsolid#eee;cursor:pointer;font-size:px;margin-right:px;padding:pxpx;text-decoration:none;background-color:#fafafa;}
.pages.currentPage{background-color:#ae;border:pxsolid#ae;color:#fff;font-weight:bold;}
原来的css样式：
.paginationa{
text-decoration:none;
border:pxsolid#AAE;
color:#B;
}
.paginationa,.paginationspan{
display:inline-block;
padding:.em.em;
margin-right:px;
margin-bottom:px;
}
.pagination.current{
background:#B;
color:#fff;
border:pxsolid#AAE;
}
.pagination.current.prev,.pagination.current.next{
color:#;
border-color:#;
background:#fff;
}
可以根据自己设计显示样式
2、使用方法
2.1、html显示
<divclass="second-ul-ctn"> <ulclass="second-ul"id="ulProducts"> </ul> <divclass="pages"> <inputtype="hidden"id="hideTotalCount"/> <divid="Pagination"class="pagination"> </div> </div> </div>
ulProducts中放的是要显示的数据，生成的分页的工具条是放在Pagination中的
2.2javascript代码
$(function(){
searchMyme(0);
pageInit();
$("#btnSearch").on("click",function(){
searchMyme(0);
pageInit();
returnfalse;
});
});
functionsearchMyme(page,pageination){
varmonth=$("#btnMonth").val();
varobj={
Month:month,
OpType:"getme",
page:(page+1)
,rows:10
};
varurl="../../Controler/FinaceMo/GetStaffIncome_H.ashx";
$.get(url,obj,function(data){
$("#tbIncome").empty();
varobj=JSON.parse(data);
vartotal=obj.Total;
$("#hideTotalCount").val(total);
vararrHtml=[];
$.each(obj.Rows,function(i,data){
arrHtml.push("<tr><td>"+(i+1)+"</td>");
arrHtml.push("<td>"+data.Account+"</td>");
arrHtml.push("<td>"+data.Name+"</td>");
arrHtml.push("<td>"+data.Month+"</td>");
arrHtml.push("<td>"+data.IncomeAmount+"</td>");
arrHtml.push("<td><ahref='MyDetail.aspx?Account="+data.Account+"&Month="+data.Month+"'class='a-blue'>查看明细</a></td></tr>");
});
$("#tbIncome").append(arrHtml.join(''));
});
};
functionpageInit(){
vartotalCount=$("#hideTotalCount").val();
$("#Pagination").pagination(parseInt(totalCount),{
items_per_page:10,
//current_page:1,//当前选中的页面默认是0，表示第1页
num_edge_entries:2,//两侧显示的首尾分页的条目数,默认为0，好像是尾部显示的个数
num_display_entries:2,//连续分页主体部分显示的分页条目数,默认是10
link_to:"javascript:void(0)",//分页的链接
prev_text:"上一页",
next_text:"下一页",
prev_show_always:true,
next_show_always:true,
callback:searchMyIncome
});
}
searchMyme是获取分页的数据，将总数放到一个隐藏的控件中，总数分页控件需要使用，这里ajax调用需要同步执行，不然取不到返回的总数
pageInit()就是初始化控件
这样设置基本就OK了~