2021-06-12
作者：互联网
bootstrap-table前后端分页
1.前端分页
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/>
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
<script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script>
<script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<h2>前端分页</h2>
<table id="mytable"></table>
</body>
<script>
$(document).ready(function () {
$("#mytable").bootstrapTable({
url:"/findALL", //请求地址
striped : true, //是否显示行间隔色
pageNumber : 1, //初始化加载第一页
pagination : true,//是否分页
sidePagination : 'client',//server:服务器端分页|client：前端分页
pageSize : 5,//单页记录数
pageList : [ 5, 10],//可选择单页记录数
showRefresh : true,//刷新按钮
columns : [ {
title : 'id',
field : 'id',
sortable : true
}, {
title : '姓名',
field : 'name',
sortable : true
}, {
title : '年龄',
field : 'age',
sortable : true
},{
title : '性别',
field : 'sex',
sortable : true
}]
})
})
</script>
</html>
2.后端分页
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/bootstrap-table-master/dist/bootstrap-table.css}" rel="stylesheet"/>
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
<script th:src="@{/bootstrap-table-master/dist/bootstrap-table.js}"></script>
<script th:src="@{/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<h2>后端分页</h2>
<table id="mytable"></table>
</body>
<script>
$(document).ready(function () {
$("#mytable").bootstrapTable({
url:"/getAll", //请求地址
striped : true, //是否显示行间隔色
pageNumber : 1, //初始化加载第一页
pagination : true,//是否分页
sidePagination : 'server',//server:服务器端分页|client：前端分页
pageSize : 5,//单页记录数
pageList : [ 5, 10, 20],//可选择单页记录数
showRefresh : true,//刷新按钮
queryParams : function(params) {//上传服务器的参数
var temp = {
offset :params.offset + 0,// SQL语句起始索引
pageNumber : params.limit // 每页显示数量
};
return temp;
},columns : [ {
title : 'id',
field : 'id',
sortable : true
}, {
title : '姓名',
field : 'name',
sortable : true
}, {
title : '年龄',
field : 'age',
sortable : true
},{
title : '性别',
field : 'sex',
sortable : true
}],
responseHandler(res) {
// 插件默认返回
return {
"rows": res.data.data,
"total": res.data.count
};
}
})
})
</script>
</html>
标签：12,06,分页,title,field,2021,sortable,true,id 来源： https://blog.csdn.net/weixin_40689822/article/details/117842724