这里主要区别两种Bootstrap Table的数据渲染方式，一、属性渲染方式，二、JS渲染方式

工作直接接手前人的，之前都直接在table标签上渲染属性，后面因为项目需要，同一页面的表格，需要申请不同的接口获取数据，写两个表格后期数据量大的时候浪费页面资源还增加了请求，所以最后改成了JS渲染方式，先贴表格效果：

一是属性渲染方式：省去表格所在项目引用的样式，单论数据加载，HTML代码就是简单的table表格的结构，table标签上添加data-属性，控制表格渲染效果。

HTML:

1 
      
        7     
         8         
          9             
12             
15             
18             
21             
24             
27             
30             
33             
36         
37     
38 
       
        
         
10                 PO单号11             
         
13                 分配单号14             
         
16                 单据类型17             
         
19                 用途20             
         
22                 物料总量23             
         
25                 已分配数量26             
         
28                 上级办理人29             
         
31                 上级办理时间32             
         
34                 操作35             
        
       
      

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 
      
        2     
         3         
          4             
 7             
10             
13             
16             
19             
22             
25             
28             
31             
34             
37         
38     
39 
       
        
         
 5                 审核状态 6             
         
 8                 PO单号 9             
         
11                 分配单号12             
         
14                 单据类型15             
         
17                 用途18             
         
20                 物料总量21             
         
23                 本次分配数量24             
         
26                 分配人27             
         
29                 分配时间30             
         
32                 物料总量33             
         
35                 操作36             
        
       
      

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,                  //是否使用缓存，默认为true16             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);就必须添加该属性，否则也无法正常显示。

 注-版权声明：本文为博主原创文章，未经博主允许不得转载。