这里主要区别两种Bootstrap Table的数据渲染方式，一、属性渲染方式，二、JS渲染方式
工作直接接手前人的，之前都直接在table标签上渲染属性，后面因为项目需要，同一页面的表格，需要申请不同的接口获取数据，写两个表格后期数据量大的时候浪费页面资源还增加了请求，所以最后改成了JS渲染方式，先贴表格效果：
一是属性渲染方式：省去表格所在项目引用的样式，单论数据加载，HTML代码就是简单的table表格的结构，table标签上添加data-属性，控制表格渲染效果。
HTML:
1 <table id="UnDistributeTable" class="table table-hover table-responsive table-bordered grayTable" data-toggle="table" 2 data-query-params="Setparams_UnDistribute" data-query-params-type="" data-method="post" 3 data-url="/api/data " 4 data-side-pagination="server" data-sort-name="" 5 data-id-field="WorkID" data-height="" data-page-number="1" data-response-handler="GetData" data-striped=true 6 data-pagination="true" data-page-size="15" data-page-list="[50,100,200]"> 7 <thead> 8 <tr> 9 <th data-field="PONum" data-sortable="true"> 10 PO单号 11 </th> 12 <th data-field="AllotWorkNum" data-sortable="true"> 13 分配单号 14 </th> 15 <th data-field="NKAFlagName" data-sortable="true"> 16 单据类型 17 </th> 18 <th data-field="Purpose" data-sortable="true"> 19 用途 20 </th> 21 <th data-field="SumQuantity"> 22 物料总量 23 </th> 24 <th data-field="SumAllocationQuantity" > 25 已分配数量 26 </th> 27 <th data-field="OperatorName"> 28 上级办理人 29 </th> 30 <th data-field="OperatorTime"> 31 上级办理时间 32 </th> 33 <th data-field="" data-formatter="Opera" > 34 操作 35 </th> 36 </tr> 37 </thead> 38 </table>
JS:
1 function Setparams_UnDistribute(params) { 2 var e = [{ PageSize: params.pageSize, PageIndex: params.pageNumber, OrderByField: params.sortName, OrderByType: params.sortOrder == "asc" ? 0 : 1, AllotState: 0,PONum:"" }]; 3 return e; 4 } 5 6 function GetData(res) { 7 return { 8 "total": res.Total, //总页数 9 "rows": res.Data //数据 10 }; 11 }
这样就能够加载出路径url的数据了。
二就是JS加载方式，不会在table标签上添加其他的属性，table的结构更加清楚。
HTML:
1 <table id="DistributeTable" class="table table-hover table-responsive table-bordered grayTable" > 2 <thead> 3 <tr> 4 <th data-field="CheckState" > 5 审核状态 6 </th> 7 <th data-field="PONum" data-sortable="true"> 8 PO单号 9 </th> 10 <th data-field="WorkNum" data-sortable="true"> 11 分配单号 12 </th> 13 <th data-field="NKAFlagName" data-sortable="true"> 14 单据类型 15 </th> 16 <th data-field="Purpose" data-sortable="true"> 17 用途 18 </th> 19 <th data-field="SumQuantity" > 20 物料总量 21 </th> 22 <th data-field="SumAllocationQuantity" > 23 本次分配数量 24 </th> 25 <th data-field="OperatorName" data-sortable="true"> 26 分配人 27 </th> 28 <th data-field="OperatorTime" data-sortable="true"> 29 分配时间 30 </th> 31 <th data-field="SumQuantity" data-sortable="true"> 32 物料总量 33 </th> 34 <th data-field="" data-formatter="OperaView"> 35 操作 36 </th> 37 </tr> 38 </thead> 39 </table>
JS:
1 $(function () { 2 var oTable = new TableInit(); 3 oTable.Init(); 4 }); 5 var TableInit = function () { 6 var oTableInit = new Object(); 7 //初始化Table 8 oTableInit.Init = function () { 9 var url = ‘/api/data’; //请求后台的URL（*） 10 11 $('#DistributeTable').bootstrapTable({ 12 url: url, 13 method: 'post', 14 striped: true, 15 cache: false, //是否使用缓存，默认为true 16 pagination: true, 17 sortable: true, 18 sortName:"PONum", 19 queryParams: oTableInit.queryParams, 20 sidePagination: "server", 21 pageNumber: 1, 22 pageSize:15, 23 pageList: [25, 50, 100], 24 uniqueId: "id", //每一行的唯一标识，一般为主键列 25 responseHandler: function (res) { 26 return { 27 "total": res.Total, 28 "rows": res.Data 29 }; 30 31 } 32 }); 33 }; 34 35 //得到查询的参数 36 oTableInit.queryParams = function (params) { 37 var e = [{ PageSize: params.limit, PageIndex: Math.floor(params.offset / params.limit) + 1, OrderByField: params.sort , OrderByType: params.order == "asc" ? 0 : 1, AllotState: 1, PONum:"" }]; 38 return e; 39 }; 40 return oTableInit; 41 };
两种方式，渲染所得效果一致，完美，具体使用时，采用哪种方式渲染表格都可以，属性渲染更清楚显示出表格与参数设置的对应关系，适用于功能固定的表格，如果页面同一表所要加载的数据源会发生变化的话，最好使用第二种JS 渲染表格的方式，可以添加表格加载条件，来判断具体加载哪一数据源的数据，控制表格表格加载数据并渲染。
另，Bootstrap Table表格中有一点我比较迷茫的地方还没弄清楚，所以也提一下，就是table标签中一般有data-toggle=”table”属性值的设置，设置了就表示不写JS启用表格，一般在对table进行JS初始化的时候，比如写$(“#table”).bootstrapTable({“data”, data});这种的时候，如果声明了该属性，就无法正常渲染表格；但是如果使用Bootstrap Table方法渲染表格，比如$(“#table”).bootstrapTable(“load”, data);就必须添加该属性，否则也无法正常显示。
注-版权声明：本文为博主原创文章，未经博主允许不得转载。