参考这位大哥的：https://www.cnblogs.com/subendong/p/9232548.html
效果图:
前端代码部分
<!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;
laypage.render({
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) {
//查询条件
var param = {
page: pageIndex,
rows: pageSize,
//其它查询条件可在下面添加
};
//后台数据接口
$.ajax({
type: ‘GET‘,
url: ‘http://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 = result.data.totalRows;
}
});
};
后端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);
}
原文地址：https://www.cnblogs.com/lfyu/p/11982081.html
时间： 2024-10-09 19:59:53