bootstrap table通過ajax獲取後臺資料展示在table
阿新 • • 發佈:2018-12-13
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 }], }); }