这里主要区别两种Bootstrap Table的数据渲染方式，一、属性渲染方式，二、JS渲染方式
工作直接接手前人的，之前都直接在table标签上渲染属性，后面因为项目需要，同一页面的表格，需要申请不同的接口获取数据，写两个表格后期数据量大的时候浪费页面资源还增加了请求，所以最后改成了JS渲染方式，先贴表格效果：
一是属性渲染方式：省去表格所在项目引用的样式，单论数据加载，HTML代码就是简单的table表格的结构，table标签上添加data-属性，控制表格渲染效果。
HTML:
1
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=true6 data-pagination="true"data-page-size="15"data-page-list="[50,100,200]">
7
8
9
10 PO单号11
12
13 分配单号14
15
16 单据类型17
18
19 用途20
21
22 物料总量23
24
25 已分配数量26
27
28 上级办理人29
30
31 上级办理时间32
33
34 操作35
36
37
38
HTML Code
JS:
1 functionSetparams_UnDistribute(params) {2 var e = [{ PageSize: params.pageSize, PageIndex: params.pageNumber, OrderByField: params.sortName, OrderByType: params.sortOrder == "asc" ? 0 : 1, AllotState: 0,PONum:""}];3 returne;4 }5
6 functionGetData(res) {7 return{8 "total": res.Total, //总页数
9 "rows": res.Data //数据
10 };11 }
JS Code
这样就能够加载出路径url的数据了。
二就是JS加载方式，不会在table标签上添加其他的属性，table的结构更加清楚。
HTML:
1
2
3
4
5 审核状态6
7
8 PO单号9
10
11 分配单号12
13
14 单据类型15
16
17 用途18
19
20 物料总量21
22
23 本次分配数量24
25
26 分配人27
28
29 分配时间30
31
32 物料总量33
34
35 操作36
37
38
39
HTML Code
JS:
1 $(function() {2 var oTable = newTableInit();3 oTable.Init();4 });5 var TableInit = function() {6 var oTableInit = newObject();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.Data29 };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 returne;39 };40 returnoTableInit;41 };
JS Code
两种方式，渲染所得效果一致，完美，具体使用时，采用哪种方式渲染表格都可以，属性渲染更清楚显示出表格与参数设置的对应关系，适用于功能固定的表格，如果页面同一表所要加载的数据源会发生变化的话，最好使用第二种JS 渲染表格的方式，可以添加表格加载条件，来判断具体加载哪一数据源的数据，控制表格表格加载数据并渲染。
另，Bootstrap Table表格中有一点我比较迷茫的地方还没弄清楚，所以也提一下，就是table标签中一般有data-toggle=”table”属性值的设置，设置了就表示不写JS启用表格，一般在对table进行JS初始化的时候，比如写$(“#table”).bootstrapTable({“data”, data});这种的时候，如果声明了该属性，就无法正常渲染表格；但是如果使用Bootstrap Table方法渲染表格，比如$(“#table”).bootstrapTable(“load”, data);就必须添加该属性，否则也无法正常显示。
注-版权声明：本文为博主原创文章，未经博主允许不得转载。