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
- }],
- });
- }