标签：count 这不 需求 后台 pre 点击 function class laypage
用了一段时间，感觉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>
标签：count 这不 需求 后台 pre 点击 function class laypage
原文地址：https://www.cnblogs.com/chaoba/p/10458728.html
