Bootstrap实现表格分页

怼烎@ 2022-05-20 09:28 317阅读 0赞

1.官网下载Bootstrap地址：[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]

（我的资源地址：[https://download.csdn.net/download/rexueqingchun/10544681][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请求则无需设置**

[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started/#download
[https_download.csdn.net_download_rexueqingchun_10544681]: https://download.csdn.net/download/rexueqingchun/10544681