bootstrap-table真香系列-数据绑定+ajax请求数据进行数据渲染(不推荐)

继上一篇动态渲染表格的方式后，这里使用另外一种，先定义表头，然后使用Ajax请求后台，动态渲染数据的方式填充表格。

html页面如下：

	<!-- data-url 结合ajax的响应式表格方式 begin   数据格式无要求  分页未找到怎么用-->
	<div class="example">
		<!-- <table data-toggle="table"  id="WorkTable"  data-height="246" data-pagination="true"> -->
		<table data-toggle="table" id="WorkTable" data-classes="table table-hover table-condensed"  data-striped="true" data-height="250" data-mobile-responsive="true">
		    <thead>
		        <tr>
		            <!-- <th data-field="state" data-checkbox="true"></th> -->
		            <th data-field="userName" data-align="center">用户名</th>
		            <th data-field="nickName" data-align="center">昵称</th>
		            <th data-field="telephone" data-align="center">联系电话</th>
		            <th data-field="address" data-align="">地址</th>
		        </tr>
		    </thead>
		 </table>
	</div>
	<!-- data-url 结合ajax的响应式表格方式 end-->

	<!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
	    $(function(){
	        $.ajax({
	            type: "POST",
	            url: "/admin/user/queryUserList",           
	            dataType: "json",
	            success: function (data) {
	            	console.log(data);
	                $("#WorkTable").bootstrapTable('load', data.resultList);
	            },
	            error: function () {
	                alert("错误");
	            }
	        });
	    });
    </script>

响应数据格式为：

{
"code": "200",
"msg": "成功",
"page": 1,
"rows": 2,
"count": 9,
"resultList": [
	{
	"id": 1,
	"userName": "admin",
	"password": "d04d4c356a1031da523d33b81510fec4",
	"address": "成都",
	"birthday": "2020-11-03",
	"createTime": "2020-11-09 14:27:46",
	"deleteStatus": 0,
	"description": "超级管理员",
	"email": "whoismy8023@163.com",
	"locked": 0,
	"nickName": "admin",
	"sex": 0,
	"telephone": "1592393000111111",
	"updateTime": "2020-11-09 14:27:28",
	"versionOptimizedLock": 0
	},
	{
	"id": 2,
	"userName": "test",
	"password": "d04d4c356a1031da523d33b81510fec4",
	"address": "北京",
	"birthday": "2020-11-09",
	"createTime": "2020-11-09 14:50:56",
	"deleteStatus": 1,
	"description": "测试",
	"email": "test@163.com",
	"locked": 0,
	"nickName": "test001",
	"sex": 0,
	"telephone": "15923930123",
	"updateTime": "2020-11-09 14:51:31",
	"versionOptimizedLock": 0
	}
],
"totalPage": 5
}

这种方式，直接将表头写死了，当然也可以很方便的定义表格的样式。但是个人感觉不够灵活，如果需要显示动态的表格(列的内容和表头是动态的)，则还是尽量在js里面渲染表格，div代码块中只包含tableId即可。

另外贴一下官网的demo：

<link href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>

<style>
.success {
  background: green;
  color: white;
}
</style>

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
  <tr>
    <th data-field="id">ID</th>
    <th data-field="name" class="success">Item Name</th>
    <th data-field="price">Item Price</th>
  </tr>
  </thead>
</table>