前后端结合怎么实现amazeUI分页效果

这篇文章给大家分享的是有关前后端结合怎么实现amazeUI分页效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

前端实现

1、引入paginator.js

(function($){
$.fn.paginator=function(options){
//this指向当前的选择器
varconfig={
url:"",
pageParent:"",
totalBars:-1,
limit:-1,
offset:1,
callback:null
}
//合并参数
varopts=$.extend(config,options);

opts.totalBars=Math.ceil(opts.totalBars/opts.limit);
//计算按钮的总个数

//获取offset参数
varqueryString=function(url){
varoffset=(url.split("?")[1]).split("=")[1];
returnparseInt(offset);
}

//ajax核心方法，用于分页的数据操作
varajaxCore=function(offset,fn){
$.ajax({
"url":opts.url,
"data":{
"offset":offset,
"limit":opts.limit
},
"dataType":"JSON",
"method":"POST",
"success":fn
});
}

//重新装配分页按钮
varpageCore=function(offset){
if(opts.offset==offset){
return;
}//如果是当前页面，那么就什么事都不用干了！
else{
ajaxCore(offset,opts.callback);
$(opts.pageParent).empty();
//否则，清空所有的节点，重新向DOM插入新的分页按钮
varoutput="";
varnextBar=offset==opts.totalBars?"<liclass=\"am-disabled\"><ayxhref=\"javascript:;\">&raquo;</a></li>":"<li><ayxhref=\""+opts.url+(offset+1)+"\">&raquo;</a></li>";
varpreBar=offset==1?"<liclass=\"am-disabled\"><ayxhref=\"javascript:;\">&laquo;</a></li>":"<li><ayxhref=\""+opts.url+(offset-1)+"\">&laquo;</a></li>";
//组装向上一个节点和下一页节点
if(opts.totalBars>7){
if(offset<5){
output+=preBar;
for(vari=1;i<=5;i++){
if(i==offset){
output+="<liclass=\"am-active\"><ayxhref=\""+opts.url+offset+"\">"+offset+"</a></li>";
}else{
output+="<li><ayxhref=\""+opts.url+i+"\">"+i+"</a></li>";
}
}
output+="<li><span>...</span></li>";
output+="<li><ayxhref=\""+opts.url+(opts.totalBars)+"\">"+(opts.totalBars)+"</a></li>"+nextBar;
}elseif(offset>=5&&offset<=opts.totalBars-4){
//当页面大于7个的时候，那么在第五个和倒数第五个时，执行
output+=preBar;
output+="<li><ayxhref=\""+opts.url+1+"\">"+1+"</a></li>";
//第一个
output+="<li><span>...</span></li>";//省略号

output+="<li><ayxhref=\""+opts.url+(offset-1)+"\">"+(offset-1)+"</a></li>";

output+="<liclass=\"am-active\"><ayxhref=\""+opts.url+offset+"\">"+offset+"</a></li>";

output+="<li><ayxhref=\""+opts.url+(offset+1)+"\">"+(offset+1)+"</a></li>";

output+="<li><span>...</span></li>";//省略号;

output+="<li><ayxhref=\""+opts.url+(opts.totalBars)+"\">"+(opts.totalBars)+"</a></li>";//尾页

output+=nextBar;

}elseif(offset>opts.totalBars-4&&offset<=opts.totalBars){
//当页面位于倒数第四个时候
output+=preBar;
output+="<li><ayxhref=\""+opts.url+1+"\">"+1+"</a></li>"+"<li><span>...</span></li>";

for(varj=4;j>=0;j--){
if(opts.totalBars-j==offset){
output+="<liclass=\"am-active\"><ayxhref=\""+opts.url+(opts.totalBars-j)+"\">"+(opts.totalBars-j)+"</a></li>";
}else{
output+="<li><ayxhref=\""+opts.url+(opts.totalBars-j)+"\">"+(opts.totalBars-j)+"</a></li>";
}
}
output+=nextBar;
}else{
console.log("分页数据出错！");
return;
}
}else{
output+=preBar;
for(vari=1;i<=opts.totalBars;i++){
if(i==offset){
output+="<liclass=\"am-active\"><ayxhref=\""+opts.url+offset+"\">"+offset+"</a></li>";
}else{
output+="<li><ayxhref=\""+opts.url+i+"\">"+i+"</a></li>";
}
}
output+=nextBar;
}
$(opts.pageParent).append(output);
opts.offset=offset;//将偏移量赋值给config里面的offset
}
}

//清理函数，防止多绑定事件和重新计算分页
varclear=function(){
$(opts.pageParent).empty().undelegate();
}


//初始化装配分页按钮
varinit=function(fn){
if(typeof(fn)!="function"){
console.log("将不能正确的执行回调函数");
}else{
opts.callback=fn;
}
clear();
ajaxCore(1,opts.callback);//执行初始化ajax方法
varpreBar="<liclass=\"am-disabled\"><ayxhref=\"javascript:;\">&laquo;</a></li>";
//上一页,（禁用的效果）
//如果只有一页，那么禁用下一页
varnextBar=opts.totalBars>1?"<li><ayxhref=\""+opts.url+2+"\">&raquo;</a></li>":"<liclass=\"am-disabled\"><ayxhref=\"javascript:;\">&raquo;</a></li>";
//最后一页
varoutput="<liclass=\"am-active\"><ayxhref=\""+opts.url+1+"\">1</a></li>";

if(opts.totalBars<=7){
for(vari=1;i<opts.totalBars;i++){
output+="<li><ayxhref=\""+opts.url+(i+1)+"\">"+(i+1)+"</a></li>";
}
}else{
for(varj=1;j<5;j++){
output+="<li><ayxhref=\""+opts.url+(j+1)+"\">"+(j+1)+"</a></li>";
}
output+="<li><span>...</span></li>";
output+="<li><ayxhref=\""+opts.url+(opts.totalBars)+"\">"+(opts.totalBars)+"</a></li>";
}
$(opts.pageParent).delegate("a","click",function(){
varoffset=queryString($(this).attr("yxhref"));
console.log("ok");
pageCore(offset);
});
$(opts.pageParent).append(preBar+output+nextBar);
};
init(opts.callback);//初始化分页引擎
}
}(window.jQuery))

2、获取总页数，再获取分页

$.ajax({
type:"GET",
url:selectSendNumberNumsByContURL,//获取总数
data:{},
dataType:"json",
success:function(data){

if(data[0].code==200){

$("#paginator").paginator({
url:selectSendNumberByContURL+"?offsets=",
pageParent:"#paginator",
totalBars:data[0].allNums,
limit:10,
offset:1,
callback:function(data1){

//清空DOM节点

//动态加dom节点
}
});
}else{

}
},
error:function(err){

}
});

后端实现（分页）

这里是controller，拿到offset（第几页）参数、limit（每页多少数量），再写SQL实现分页就好了。

@RequestMapping(value="/selectNumberCheckByCont",method=RequestMethod.POST)
@ResponseBody
publicList<ReturnUtils>selectNumberCheckByCont(HttpServletRequestrequest,
HttpServletResponseresponse)throwsException{

//统一设置返回数据格式
response.setContentType("application/json");
response.setHeader("Pragma","no-cache");
response.setCharacterEncoding("UTF-8");

Stringoffset=request.getParameter("offset");
Stringlimit=request.getParameter("limit");

List<ReturnUtils>list=iNumberCheckService.selectNumberCheckByCont(offset,limit);

returnlist;
}

感谢各位的阅读！关于“前后端结合怎么实现amazeUI分页效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！