bootstrap table通过ajax获取后台数据展示在table

1. 背景

bootstrap table 默认向后台发送语法的dataType为 json，但是为了解决跨域问题我们需要将dataType改为jsonp，这时就需要修改bootstrap table获取后台数据的方式，采用$('#table').bootstrapTable('load', data);方法。修改前和修改后代码分别如下所示。

2.修改前代码

 

[html]  view plain  copy

 

1. <div>  
2.     <table id="table"  
3.         data-toggle="table"  
4.         data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"  
5.         data-pagination="true"    
6.         data-search="true"  
7.         data-show-columns="true"  
8.         data-show-refresh="true"  
9.         data-show-toggle="true"  
10.         data-page-number="1"  
11.         data-page-size="15"  
12.         data-sort-name="create_time"  
13.         data-sort-order="desc"  
14.         data-page-list="[10, 25, 50, 100, All]"  
15.         data-click-to-select="true"  
16.         data-single-select="true"  
17.         data-toolbar="#toolbar">  
18.         <thead>  
19.             <tr>  
20.                 <th data-field="state" data-checkbox="true"></th>  
21.                 <th data-field="scene_name" data-switchable="true">推荐位名称</th>  
22.                 <th data-field="scene" data-switchable="true">场景</th>  
23.                 <th data-field="creater" data-switchable="true">创建者</th>  
24.                 <th data-field="create_time" data-sortable="true" data-switchable="true">创建时间</th>  
25.                 <th data-field="managers" data-switchable="true">授权账号</th>  
26.             </tr>  
27.         </thead>  
28.     </table>  
29. </div>  

3. 修改后代码

 

 

[html]  view plain  copy

 

1. 1. <div>  
   2.     <table id="table">  
   3.     </table>  
   4. </div>  
   5. $(function(){  
   6.     $('#table').bootstrapTable({  
   7.     ajax : function (request) {  
   8.         $.ajax({  
   9.             type : "GET",  
   10.             url : "http://guessulike.config.58corp.com/gulrecomserviceweb/gulrecall/getscene",  
   11.             contentType: "application/json;charset=utf-8",  
   12.             dataType:"jsonp",  
   13.             data:'',  
   14.             jsonp:'callback',  
   15.             success : function (msg) {            
   16.                 request.success({  
   17.                     row : msg  
   18.                 });  
   19.                 $('#table').bootstrapTable('load', msg);  
   20.             },  
   21.             error:function(){  
   22.                 alert("错误");  
   23.             }  
   24.         });  
   25.     },  
   26.           
   27.         toolbar:'#toolbar',  
   28.         singleSelect:true,  
   29.         clickToSelect:true,   
   30.         sortName: "create_time",  
   31.         sortOrder: "desc",  
   32.         pageSize: 15,  
   33.         pageNumber: 1,  
   34.         pageList: "[10, 25, 50, 100, All]",  
   35.         showToggle: true,  
   36.         showRefresh: true,  
   37.         showColumns: true,  
   38.         search: true,  
   39.         pagination: true,  
   40.         columns: [{  
   41.             field: "state",  
   42.             checkbox:true,  
   43.         },{  
   44.             field: 'scene_name',  
   45.             title: '推荐位名称',  
   46.             switchable: true  
   47.         }, {  
   48.             field: 'scene',  
   49.             title: '场景',  
   50.             switchable: true  
   51.         }, {  
   52.             field: 'creater',  
   53.             title: '创建者',  
   54.             switchable: true  
   55.         }, {  
   56.             field: 'create_time',  
   57.             title: '创建时间',  
   58.             switchable: true,  
   59.             sortable: true  
   60.         }, {  
   61.             field: 'managers',  
   62.             title: '授权账号',  
   63.             switchable: true  
   64.         }],  
   65.   
   66.     });  
   67. }