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

1. 背景

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

2.修改前代码

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. 修改后代码

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. toolbar:'#toolbar',
27. singleSelect:true,
28. clickToSelect:true,
29. sortName: "create_time",
30. sortOrder: "desc",
31. pageSize: 15,
32. pageNumber: 1,
33. pageList: "[10, 25, 50, 100, All]",
34. showToggle: true,
35. showRefresh: true,
36. showColumns: true,
37. search: true,
38. pagination: true,
39. columns: [{
40. field: "state",
41. checkbox:true,
42. },{
43. field: 'scene_name',
44. title: '推荐位名称',
45. switchable: true
46. }, {
47. field: 'scene',
48. title: '场景',
49. switchable: true
50. }, {
51. field: 'creater',
52. title: '创建者',
53. switchable: true
54. }, {
55. field: 'create_time',
56. title: '创建时间',
57. switchable: true,
58. sortable: true
59. }, {
60. field: 'managers',
61. title: '授权账号',
62. switchable: true
63. }],
64. });
65. }