官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
第一步:引入相关依赖,我使用的是链接的方式如果你觉得浪费带宽可以下到本地
<--4.0版本bootstrap开发压缩版min.css-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<--bootstrap-table开发压缩版min.css-->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css"/>
<--bootstrap-table开发压缩版min.js-->
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<--popper开发压缩版min.js,选择每页选择多少条时会用到这个js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<--4.0版本bootstrap-table开发压缩版min.js-->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<--bootstrap中文语言包支持-->
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
第二步:创建表格容器
<table id="testtable" class=" table-striped table-dark">
</table>
第三步:渲染表格完成客户端分页
$('#testtable').bootstrapTable({
method : 'post',
url : "http://xxx.xxx.x.xx:xxxx/oneMap/car/bootstraptablegetCarposition",//请求路径
striped : true, //是否显示行间隔色
pageNumber : 1, //初始化加载第一页
pagination : true,//是否分页
sidePagination : 'client',//server:服务器端分页|client:前端分页
search: true, //是否启用搜索框,此处是前端搜索
pageSize : 5,//单页记录数
pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
columns : [ {
title : 'id',
field : 'id',
}, {
title : 'motoId',
field : 'motoId',
}, {
title : 'type',
field : 'type',
}, {
title : '车牌号',
field : 'license',
}, {
title : '司机id',
field : 'driver',
} , {
title : 'state',
field : 'state',
}, {
title : 'position',
field : 'position',
}, {
title : 'area',
field : 'area',
}, {
title : 'areaCarid',
field : 'areaCarid',
}]
});
效果展示:
搜索展示:
当前显示多少页展示: