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

浅浅的花香味﹌ 2022-06-09 03:44 964阅读 0赞

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