ajax + laypage实现分页
ajax + laypage实现分页
使用laypage实现分页，官网给出的实例如下，由于官网没有从后台获取数据，只是在前端构造了一些数据，在我们实际应用中可能会踩坑，在此做个记录。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>将一段已知数组分页展示</legend>
</fieldset>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
//调用分页
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push('' + item +'');
});
return arr.join('');
}();
}
});
});
</script>
</body>
</html>
以上是官网给出的示例，实现了简单的分页，下面介绍正题，前端发送ajax请求给后台，而后返回相应数据，代码如下：
首先需要定义layui需要接受的信息，该类是一个实体类，以便于返回json格式数据被laypage解析，该类的get、set方法省略。
public class Result<T> implements Serializable {
int page;
int limit;
int count;
String code;
String msg;
List<T> data;
T example;
}
后台接口代码如下：
@ResponseBody
@RequestMapping("/planlist")
public Result<Collectplan> list(Result<Collectplan> result, Collectplan example)
{
result.setExample(example);
planservice.queryByPage(result);
result.setCode("0");
return result;
}
可以看到，接口返回的数据类型是Result，也就是上面代码定义的实体类，其中的业务可不必关注，能返回数据即可。
下面是前台js代码，可直接嵌入你的代码
<script>
layui.use(['laypage', 'layer'], function() {
var laypage = layui.laypage
, layer = layui.layer; //获取laypage、layer模块
$(function () {
getListData()
});
function getListData(){
$.ajax({
type: 'POST',
url: "/plan/planlist", // ajax请求路径
data: {
page:1, //当前页数
rows:10
},
dataType:'json',
success: function(result){
var data1 = [];
$.each(result.data,function(){
data1.push("'" this.planTitle + "'");
});
laypage.render({
elem: 'demo20'
,count: data1.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data1.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push('' + item +'');
});
return arr.join('');
}();
}
});
}
});
};
});
</script>
通过官网的实例可以看到，laypage可以解析类似于data的数据，但是我们从后台返回的数据是不会满足这种格式的，因此在js中需要做一点处理，当ajax正确返回结果时，将你需要的数据遍历push到一个数组中，并给数据拼接一对单引号，将data1这个数组传入即可实现分页。在这里很容易踩坑，这里如果没有单引号是不会显示数据的。
var data1 = [];
$.each(result.data,function(){
data1.push("’" + this.planTitle + “’”);
});
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州'
];
再次记录，有问题欢迎大家指正，需要代码可以截取完整案例。