使⽤Layui和Vue实现分页参考这位⼤哥的：
效果图:
前端代码部分
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../lib/layui.css" media="all"/>
</head>
<body>
<!--列表-->
<div id="vueContainer">
<!--    <div className="layui-row layui-col-space2">
<div class="layui-col-md1">
<input type="text" v-model="searchId" required lay-verify="required" placeholder="id" class="layui-input" autocomplete="off"/>
</div>
<div class="layui-col-md1">
<button id="btn2"  class="layui-btn" @click.prevent="search()">搜索</button>
</div>
</div> -->
<table class="layui-table" lay-filter="test">
<thead>
<tr>
<th>序号</th>
<th>定时名称</th>
<th>业务编码</th>
<th>业务名称</th>
<th>定时开始时间</th>
<th>详情</th>
<th>⽇志级别</th>
<th>修改</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="item in dataList" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.timerName}}</td>
<td>{{item.businessCode}}</td>
<td>{{item.businessName}}</td>
<td>{{item.timerStartTime}}</td>
<td>{{item.detail}}</td>
<td>{{item.logLevel}}</td>
<th>
<a class="layui-btn layui-btn-normal" @click.prevent="upd(item.id)">修改</a>
</th>
<th>
<button class="layui-btn layui-btn-danger" @click.prevent="del(item.id)">删除</button>
</th>
</tr>
</tbody>
</table>
</div>
<!--分页容器-->
<div id="pagination"></div>
<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../lib/vue-2.4.0.js"></script>
<script src="../../js/timer/index.js"></script>
</body>
</html>
index.js
/
/使⽤Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据
var vue = new Vue({
el: "#vueContainer",
data: {
dataList: null
}
});
//使⽤layui分页
layui.use('laypage', function () {
var laypage = layui.laypage;
elem: 'pagination'
, count: totalCount
,limits: [5,10,15,20,50] //设置条数可以选择显⽰多少条
, layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
, jump: function (obj, first) {
//点击⾮第⼀页页码时的处理逻辑。⽐如这⾥调⽤了ajax⽅法，异步获取分页数据
if (!first) {
pagination(obj.curr, obj.limit);//第⼆个参数不能⽤变量pageSize，因为当切换每页⼤⼩的时候会出问题
}
}
});
});
var pageIndex = 1;
var pageSize = 10;
var totalCount = 0;
pagination(pageIndex, pageSize);
function pagination(pageIndex, pageSize) {
layui框架怎么用//查询条件
var param = {
page: pageIndex,
rows: pageSize,
//其它查询条件可在下⾯添加
};
//后台数据接⼝
$.ajax({
type: 'GET',
url: '127.0.0.1:8080/api/v1/timer/query',
// dataType: 'json',
data: param,
async: false,//这⾥设置为同步执⾏，⽬的是等数据加载完再调⽤layui分页组件，不然分页组件拿不到totalCount的值        success: function (result) {
console.log(result);
vue.dataList = result.data.list;
totalCount = alRows;
}
});
};
后端java代码
@ApiOperation(value = "查询定时任务登记列表")
@GetMapping(value = "/query")
public RespResult queryTimer(Integer page,Integer rows,String timerName){
Map<String,Object> params = new HashMap<>();
if (StringUtils.isNotBlank(timerName)){
params.put("timerName",timerName);
}
params.put("pageNo",page);
params.put("pageSize",rows);
PageInfo<TimerInfo> timerInfoPageInfo = timerService.queryTimerList(params);
return RespResult.SUCCESSFUL(timerInfoPageInfo);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。