controller代码
/*
* 查询显示所有新闻
* 前端分页
* */
@RequestMapping("/allNewsList")
@ResponseBody
public Map getAllNews() {
List allNews = newsService.getAllNews();
Integer count = newsMapper.selectCount(null);
Map map = new HashMap<>();
map.put("total", count);
map.put("data", allNews);
return map;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
<script type="text/javascript" src="/js/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/layui/layui.all.js" charset="UTF-8"></script>
<style type="text/css">
.table th, .table td{
text-align : center;
vertical-align : middle!improtant;
}
.container {
width : 60%;
}
</style>
</head>
<body>
<div class="container content">
<div class="row">
<div>
<div class="panel panel-green margin-bottom-40">
<div class="panel-heading">
<h1 class="panel-title">新闻列表</h1>
</div>
<div class="panel-body">
<div>
<div>
<table class="table table-bordered table-striped">
<!--<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>-->
<!-- 表格数据加载 -->
<tbody id="tab_list">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 存放分页的容器 -->
<div id="layui"></div>
</div>
<script type="text/javascript" charset="UTF-8">
$(function () {
initLayPage();
});
/**
* 初始化layui分页
*/
function initLayPage(pageConf) {
if (!pageConf) {
pageConf = {};
pageConf.pageSize = 10;//此处的数字为默认一页展示多少条数据
pageConf.currentPage = 1;
}
$.post("/notLogged/allNewsList", pageConf, function (data) {
console.log(data);
layui.use(['laypage', 'layer'], function () {
var page = layui.laypage;
page.render({
elem: 'layui',
count: data.total,
curr: pageConf.currentPage,
limit: pageConf.pageSize,
first: "首页",
last: "尾页",
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
if (!first) {
pageConf.currentPage = obj.curr;
pageConf.pageSize = obj.limit;
initLayPage(pageConf);
}
}
});
})
console.log(data.data)
console.log((pageConf.currentPage - 1) * pageConf.pageSize)
fillTable(data.data, (pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
});
}
//填充表格数据
function fillTable(data, num) {
$("#tab_list").html('');
$.each(data, function (index, obj) {
// id 很多时候并不是连续的,如果为了显示比较连续的记录数,可以这样根据当前页和每页条数动态的计算记录序号
index = index + num + 1;
var info = '';
info += '<tr>';
info += '<td>' + index + '</td>';
info += '<td>' + obj.title + '</td>';
info += '<td>' + obj.createTime + '</td>';
info += '<td style="text-align: center;"><a id="read" data-id="'+obj.id+'">点击阅读</a></td>';
info += '</tr>';
$("#tab_list").append(info);
});
}
$(document).on('click', '#read', function () {
let id = $(this).attr("data-id");
window.location.href = '/notLogged/findNewsInfo?id=' + Number(id)
})
</script>
</body>
</html>
使用layui进行后端分页请看下一篇