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

1. 背景

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

2.修改前代码

<div>
<table id="table"
data-toggle="table"
data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"
data-pagination="true"
data-search="true"
data-show-columns="true"
data-show-refresh="true"
data-show-toggle="true"
data-page-number="1"
data-page-size="15"
data-sort-name="create_time"
data-sort-order="desc"
data-page-list="[10, 25, 50, 100, All]"
data-click-to-select="true"
data-single-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="scene_name" data-switchable="true">推荐位名称</th>
<th data-field="scene" data-switchable="true">场景</th>
<th data-field="creater" data-switchable="true">创建者</th>
<th data-field="create_time" data-sortable="true" data-switchable="true">创建时间</th>
<th data-field="managers" data-switchable="true">授权账号</th>
</tr>
</thead>
</table>
</div>

3. 修改后代码

<div>
<table id="table">
</table>
</div>
$(function(){
$('#table').bootstrapTable({
ajax : function (request) {
$.ajax({
type : "GET",
url : "http://guessulike.config.58corp.com/gulrecomserviceweb/gulrecall/getscene",
contentType: "application/json;charset=utf-8",
dataType:"jsonp",
data:'',
jsonp:'callback',
success : function (msg) {
request.success({
row : msg
});
$('#table').bootstrapTable('load', msg);
},
error:function(){
alert("错误");
}
});
},
toolbar:'#toolbar',
singleSelect:true,
clickToSelect:true,
sortName: "create_time",
sortOrder: "desc",
pageSize: 15,
pageNumber: 1,
pageList: "[10, 25, 50, 100, All]",
showToggle: true,
showRefresh: true,
showColumns: true,
search: true,
pagination: true,
columns: [{
field: "state",
checkbox:true,
},{
field: 'scene_name',
title: '推荐位名称',
switchable: true
}, {
field: 'scene',
title: '场景',
switchable: true
}, {
field: 'creater',
title: '创建者',
switchable: true
}, {
field: 'create_time',
title: '创建时间',
switchable: true,
sortable: true
}, {
field: 'managers',
title: '授权账号',
switchable: true
}],
});
}

bootstrap table通过ajax获取后台数据展示在table的相关教程结束。