用了一段时间，感觉layui比bootstrap 方便了很多。在js操作上比bootstrap减少了许多的代码量。
今天遇到需要前台分页。当然，不是表格，如果是表格的话。使用yalui table和bootstrap table都很简单。
但是今天是要随意分页。任意标签。
看了看官方文档。也不是很懂，网上看了看。最后涂涂改改。终于中了出来。开心ing
人生就像魔法书，涂涂改改又是几千年。
需求：前台显示列表。<ul> <li>
分页操作
但是后台一直都是表格控件来完成的。这不用表格头疼。 逻辑分页比较简单。但是写的时候，后台调用本方法的时候，采用的是物理分页。但是layui 分页插件，看着比较适合逻辑分页。但是我有不能这样做。
最后弄出来了，思路如下：
1.加载layui库
2.发送ajax请求，获取数据。在这里，应该获取的是数据的总数。但是我懒。用的还是带有数据的接口。分页接口数据返回的里面带有数据总数。这个需要看使用的是什么分页。这里使用的是mybaits-plus的分页插件
3.监听jump: function(obj, first)方法。这个方法当你点击下一页或者分页的下标的时候会执行。进入的时候是第一页。所以会执行一次
4.然后在监听的函数里面在请求一次ajax。然后获得数据，渲染到页面。
代码如下
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" th:href="@{/favicon.ico}" /> <link rel="stylesheet" href="../../static/css/font.css"> <link rel="stylesheet" href="../../static/css/weadmin.css"> <script src="./lib/layui/layui.js" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script></head><body>
<ul id="test">
</ul>
<div id="blogList"></div>
</body>
<script> layui.use([‘jquery‘,‘laypage‘, ‘layer‘,‘table‘],function(){ var $ =layui.jquery, laypage=layui.laypage, layer=layui.layer, table=layui.table; var pages=1; var limits=2; $.ajax({ url:‘/article/artList‘, type:‘get‘, data:{page:pages,limit:limits}, dataType:‘json‘, success:function (datas) { laypage.render({ elem: ‘blogList‘ ,count: datas.count //数据总数，从服务端得到 ,limit:2 ,jump: function(obj, first){ //obj包含了当前分页的所有参数，比如： console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数
$.ajax({ url:‘/article/artList‘, type:‘get‘, data:{page:obj.curr,limit:obj.limit}, dataType:‘json‘, success:function (data1) { var arr=[]; arr.splice(0,arr.length); layui.each(data1.data, function(index, item){
arr.push(‘<li>‘+ item.title +‘</li>‘); }); console.log(arr); $(‘#test‘).html(arr);
}
});
} }); } });
});
</script></html>
原文地址：https://www.cnblogs.com/chaoba/p/10458728.html
时间： 2024-11-12 04:46:50