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('<li>'+ item +'</li>');});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('<li>'+ item +'</li>');});return arr.join('');}();}});}});};});
</script>

通过官网的实例可以看到，laypage可以解析类似于data的数据，但是我们从后台返回的数据是不会满足这种格式的，因此在js中需要做一点处理，当ajax正确返回结果时，将你需要的数据遍历push到一个数组中，并给数据拼接一对单引号，将data1这个数组传入即可实现分页。在这里很容易踩坑，这里如果没有单引号是不会显示数据的。
var data1 = [];
$.each(result.data,function(){
data1.push("’" + this.planTitle + “’”);
});

var data = ['北京','上海','广州','深圳','杭州'];

再次记录，有问题欢迎大家指正，需要代码可以截取完整案例。

ajax + laypage实现分页相关推荐

.net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
产品ajax无刷新kesion,科讯商业版中用到的ajax空间与分页函数
科讯商业版中用到的ajax空间与分页函数更新时间:2007年09月02日 22:02:32 作者: 科讯sql商业版中用到的ajax空间与分页函数,他们的js代码学习是非常不错的 //ajax ...
IntelliJ IDEA中ajax开发实现分页查询
此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下 https://www.jianshu.com/p/1fd6b39e98ac IntelliJ IDEA中ajax开发实现分页查询文 ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
layui 分页ajax,实现Ajax异步的layui分页
页面代码: 人才推荐姓名学历技能经验住址联系方式 ${res}${data}于千万年之中时间的无涯的荒野里-时间的无涯的荒野里- --%> js代码 //加载完成 $(function(){ ...
关于layerui laypage自定义分页加载table问题
1:定义页码和每页展示条数 let pageNum = 1; let pageSize = 10; 2:定义layerui工具 layui.use(['table','laypage'], funct ...
AJAX+JQUERRY实现分页
============== Windows Phone 7手机开发..Net培训.期待与您交流! ============= JQERRY代码如下: var where = "" ...

ajax + laypage实现分页

ajax + laypage实现分页相关推荐

最新文章

热门文章