Bootstrap实现表格分页
程序员文章站
2024-01-13 22:13:40
...
1.官网下载Bootstrap地址：https://v3.bootcss.com/getting-started/#download
（我的资源地址：https://download.csdn.net/download/rexueqingchun/10544681）
2.页面使用及添加所依赖的JS和CSS
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-table</title>
<script src="/script/jquery.1.12.4.min.js"></script>
<script src="/script/My97DatePicker/WdatePicker.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js"></script>
<link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/bootstrap-3.3.7-dist/css/bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
$('#mytab').bootstrapTable({
url:"jkrzList",//请求路径
method: 'post',
contentType:'application/x-www-form-urlencoded; charset=UTF-8',//post请求需设置
striped: true, //是否显示行间隔色
pageNumber: 1, //初始化加载第一页
pagination:true,//是否分页
pageSize:10,//单页记录数
pageList:[5,10,20,30],//可选择单页记录数
showRefresh:true,//刷新按钮
queryParams : function (params) {//上传服务器的参数
var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句起始索引
ksrq : $('#ksrq').val(),
jsrq : $('#jsrq').val()
};
return temp;
},
columns:[
{
title:'字段1',
field:'SERVER_NAME',
align: 'center'
},
{
title:'字段2',
field:'SERVER_IP',
align: 'center'
},
{
title:'字段3',
field:'SERVER_ACTION',
align: 'center',
formatter: function (value, row, index){
return '<a href="'+value+'" target="_black" >'+value+'</a>'
}
},
{
title:'录入时间',
field:'LRSJ',
align: 'center',
formatter: function (value, row, index){
return new Date(value).Format("yyyy-MM-dd HH:mm:ss");
}
}
]
})
})
//查询按钮事件
$('#search_btn').click(function(){
$('#mytab').bootstrapTable('refresh');
})
//格式化日期
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap-table</h1>
</div>
<form class="form-inline">
<div class="form-group">
<label for="ksrq">开始日期</label>
<input type="text" class="form-control" id="ksrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />
</div>
<div class="form-group">
<label for="jsrq">结束日期</label>
<input type="text" class="form-control" id="jsrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="search_btn" >查询</button>
</div>
</form>
<br>
<div id="result" class="alert alert-success">
<table id="mytab" class="table table-hover"></table>
</div>
</div>
</body>
</html>3.后台返回数据
@RequestMapping(value = "jkrzList", method = {RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String, Object>> jkrzList(@RequestParam String ksrq,@RequestParam String jsrq) {
List<Map<String, Object>> list = baseDao.getJkrzList();//根据业务查询库中数据
return list;
}注意：bootstrapTable发送post请求时需设置contentType:'application/x-www-form-urlencoded; charset=UTF-8'，若发送get请求则无需设置
上一篇： element ui 实现表格分页