Springmvc+mybaits 分页处理+ajax翻页
Springmvc+mybaits
(分页处理+ajax翻页)
（2）/**
* 显示微商城模板
*/
@RequestMapping(value="/scmb",method = RequestMethod.GET)
public ModelAndView showModel(ModelAndView mv, HttpServletRequest request,Integer p, Integer k) {
if (p == null) {
p = 0;
}
if (k == null) {
k = 10;
}
Gson gson = new Gson();
Page<WeiXinMallList> page=weiXinMailService.queryPageShowWeiMallModel(p, k);
String listJson = gson.toJson(page.getContent());
mv.addObject("listJson", listJson);
mv.addObject("page", page);
mv.addObject("p", p);
mv.setViewName("/admin/weiMall/showMoBan");
return mv;
}
/**
* 在点击上一页下一页时Ajax跳转
*/
@RequestMapping(value="/listAjax",method = RequestMethod.GET)
@ResponseBody
public Page<WeiXinMallList> listAjax(ModelAndView mv, HttpServletRequest request,Integer p, Integer k) {
if (p == null) {
p = 0;
}
if (k == null) {
k = 10;
}
Page<WeiXinMallList> page=weiXinMailService.queryPageShowWeiMallModel(p, k);
return page;
}
所需（1）<link rel="stylesheet" href="${ctx }/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx }/bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx }/bootstrap/css/ionicons.min.css">
<script src="${ctx }/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctx }/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctx }/plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx }/js/jquery.bootpag.js"></script>
（serves层）
/**
* 用于展示微信商城的模板
* @return
*/
public Page<WeiXinMallList> queryPageShowWeiMallModel(Integer p, Integer k){
PageRequest pageable = new PageRequest(p, k);
List<WeiXinMallList> list=mallMapper.queryPageMallListMoBan(pageable);
Page<WeiXinMallList> page =new PageImpl<WeiXinMallList>(list, new PageRequest(p, k), pageable.getPageNumber());
return page;
}
（mapper层）
//查询模板信息
List<WeiXinMallList> queryPageMallListMoBan(@Param("pageable") Pageable pageable);
sp页面js
//分页处理
$(function(){
$('#pagination').bootpag({
total : '${page.totalPages}', //一共多少页
page : '${page.number + 1}', //当前显示的页数，该组件是从1开始
maxVisible : 10, //可以看见的页数
firstLastUse : true,
first : '首页',
last : '尾页',
wrapClass : 'pagination',
activeClass : 'active',
disabledClass : 'disabled',
nextClass : 'next',
prevClass : 'prev',
lastClass : 'last',
firstClass : 'first'
}).on("page", function(event, num) {//您所点击的页面对应的页数，是从1开始
$("#p").val(num - 1);
shuax();
});
});
////////分页处理用$.ajax//////////
function shuax(){
$.ajax({
type : "get",
url : "${ctx}/admin/listAjax?p=" + $('#p').val(),
success : function(data) {
var pas = data["content"];
json = pas;
var th = "";
for (var i = 0; i < pas.length; i++) {
var pa = pas[i];
th = th +'<tr><td>'+(i+1)+'</td>'+
'<td>'+pa["name"]+'</td>'+
'<td><img src='+pa["url"]+' height="42" width="51"></td>'+
'<td>'+pa["money"]+'</td>'+
'<td>'+pa["oldMoney"]+'</td>';
if(pa["miao"].length >20){
th = th +'<td>'+pa["miao"].substring(0,10)+'....'+'</td>';
}else{
th = th +'<td>'+pa["miao"]+'</td>';
}
th=th+'<td><button type="button" class="btn btn-success btn-sm"'+'onclick="javascript:window.location.href='+"'${ctx}/admin/updateMoBans?id="+pa["id"]+"'"+'"'+'title="修改"><span class="glyphicon glyphicon-upload"></span></button>'+
'<button type="button" class="btn btn-default btn-sm"'+
'title="删除"'+
'onclick="javascript:window.location.href='+"'${ctx}/admin/deleteMoBans?id="+pa["id"]+"'"+'"'+'>'+
'<span class="glyphicon glyphicon-trash"></span></button></td>';
}
$('#b').html(th);
var ye = data["totalPages"];
if(ye == 0) ye = 1 ;
var xian = data["number"] + 1;
$('#pagination').bootpag({
total : ye, //一共多少页
page : xian
//当前显示的页数，该组件是从1开始
});
}
})
}
<input type = "hidden" id = "p" value = "${p }">
分页插件
<div class="clearfix text-right">
<div class="box-tools">
<div id="pagination" style="margin-top: 10px;"></div>
</div>
</div>
