pages:res[0].pageTotal,//通过后台拿到的总页数
curr:curr||1,//当前页
skip:true,
jump:function(obj,first){//触发分页后的回调
if(!first){//点击跳页触发函数自身，并传递当前页：obj.curr
$("#log-list").text('');
paging(obj.curr);
}
}
});
});
};
//运行
paging();
实现以上代码，基本上的样式已经出来。下面执行实现后端分页和数据查询即可。/p>
3.后端代码–controller部分：
/**
*功能描述：返回无查询条件查询分页数据
*@parampage
*@return
*@since
*/
@RequestMapping(value="/page")
@ResponseBody
publicListgetPage(Integerpage){
if(page==null){
page=1;
}
ListsubmitLogList=newArrayList<>();
submitLogList=logService.getAllLog(page);
returnsubmitLogList;
}
4.后端代码–service部分：
/**
*功能描述:无查询条件分页
*@parampageCurr
*@return
*@since
*/
publicListgetAllLog(intpageCurr){
intpageSize=10;//每页显示十条数据
intpageStart=(pageCurr-1)*pageSize;//limit=(pageCurr-1)*10,10
ListsubmitLogList=newArrayList<>();
submitLogList=logMapper.getAllLog(pageSize,pageStart);
//计算前端页面显示的页数
//当前数据库记录数
intcount=submitLogList.get(0).getPageTotal();
intpage=count%pageSize==0?count/pageSize:count/pageSize+1;
log.debug("页数"+page);
submitLogList.get(0).setPageTotal(page);
returnsubmitLogList;
}
5.后端代码–dao部分：
/**
*功能描述：查询所有数据--带分页
*@parampageSize每页大小
*@parampageCurr即将显示当前页
*@return
*@since
*/
@Select("SELECTs.pageTotal,number_id,staff_name,create_time,weekly_id,operationFROMsubmit_log,"
+"(SELECTcount(1)ASpageTotalFROMsubmit_log)sORDERBYnumber_idDESCLIMIT#{pageStart},#{pageSize}")
@Results({
@Result(column="number_id",property="numberId"),
@Result(column="staff_name",property="staffName"),
@Result(column="create_time",property="createTime"),
@Result(column="weekly_id",property="weeklyId")
})
ListgetAllLog(@Param("pageSize")intpageSize,@Param("pageStart")intpageStart);
至此，异步分页前后端结合基本结束，因为代码都带有必要的注释，所以也无需过多解释。
整页刷新式跳转
这种方式的分页，基本上分页逻辑都由laypage去实现了，后端分页逻辑基本上不用过多考虑。还是比较方便的，建议结合官网的文档和代码进行理解。下面是实现代码：
1.前端HTML代码：
//此处是显示数据的具体HTML代码
//分页显示的位置
2.Js代码：
这部分的分页实现，后端只需返回总页数即可。
functionpaging(){
$.getJSON('/weekly-page-count',{},function(res){
//整页刷新
laypage({
cont:'page-list',
pages:res,//可以叫服务端把总页数放在某一个隐藏域，再获取。假设我们获取到的是18
curr:function(){//通过url获取当前页，也可以同上（pages）方式获取
varpage=location.search.match(/page=(\d+)/);
returnpage?page[1]:1;
}(),
skip:true,
jump:function(e,first){//触发分页后的回调
if(!first){//一定要加此判断，否则初始时会无限刷新
location.href='?page='+e.curr;
}
}
});
});
}
paging();
3.后端代码–controller部分：
/**
*功能描述：返回无查询条件查询分页数--用户
*@parampage
*@return
*@since
*/
@RequestMapping(value="/weekly-page-count")
@ResponseBody
publicIntegergetPage1(IntegeruserId){
Integercount=weeklyService.getPageCount(userId);
returncount;
}
4.后端代码–service部分：
/**
*功能描述：总页数
*@paramuserId
*@return
*@since
*/
publicIntegergetPageCount(IntegeruserId){
intcount=0;
count=weeklyMapper.getPageCount(userId);
intpageSize=5;//每页显示条数
intpage=count%pageSize==0?count/pageSize:count/pageSize+1;//计算页数
returnpage;
}
5.后端代码–dao部分：
/**
*功能描述：无条件查询记录条数==分页总数
*@paramuserId
*@return
*@since
*/
@Select("SELECTcount(1)ASpageTotalFROMweeklyWHEREuser_id=#{userId}")
IntegergetPageCount(@Param("userId")IntegeruserId);
总结：两种分页方式使用起来都是比较方便的。使用的场景还是有些不同：异步式适合JQuery重写页面比较容易的；整页式更简单，各种场景都可以使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。