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

最新推荐文章于 2025-06-07 08:28:40 发布

原创最新推荐文章于 2025-06-07 08:28:40 发布 · 4.5w 阅读

31 ·

CC 4.0 BY-SA版权

本文介绍如何在使用Bootstrap Table时解决跨域问题，通过修改数据类型为jsonp，并使用ajax方式请求数据，最后通过$('#table').bootstrapTable('load',data)方法加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

	});
}