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

转自：https://blog.csdn.net/chenxingzhen001/article/details/77601229?locationNum=10&fps=1

跨域的话，可以在ajax请求时 配置这样的参数

ajaxOptions: {
        xhrFields: {        //跨域
            withCredentials: true
        },
        crossDomain: true
    },

1. 背景

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

2.修改前代码

	

		

			

				

				
推荐位名称
				
场景
				
创建者
				
创建时间
				
授权账号
			
		
	

 

3. 修改后代码

 

	

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