Bootstrap实现表格分页

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>&nbsp;&nbsp;
	      <input type="text" class="form-control" id="ksrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />&nbsp;&nbsp;
	    </div>
	    <div class="form-group">
	      <label for="jsrq">结束日期</label>&nbsp;&nbsp;
	      <input type="text" class="form-control" id="jsrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />&nbsp;&nbsp;
	    </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请求则无需设置

Bootstrap实现表格分页

猜你喜欢