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

1. 背景

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

2.修改前代码

[html] view plain copy

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

[html] view plain copy

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

转载于:https://www.cnblogs.com/telwanggs/p/8875821.html

bootstrap table通过ajax获取后台数据展示在table相关推荐

使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据编号名称时间 ...
ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
文章目录 1 ajax获取后台数据的几种方式 1.1 原生js的ajax方式 1.1.1 get 1.1.2 post 1.2 jQuery封装的ajax方式 1.2.1 $.ajax 1.2.2 $ ...
周记：ajax获取后台数据
本周学习: 本周学习了通过Ajax获取后台数据,实现这个操作需要一个接口. $.ajax({type: "post",url: "http://118.195.129.1 ...
ajax获取java后台数据_jQuery ajax获取后台数据怎么在前端显示。
前后端分离以后,前端界面采用ajax与后台数据交互.现在从后台获取到下载文件的集合,怎么在前端一行一行显示,点击某一行可以直接跳转过去下载对应的文件. pageEncoding="UTF-8 ...
js的 ajax获取后台数据,如何通过js来获取后台数据
方法一后台方法: 复制代码代码如下: // 需要标识为WebMethod [System.Web.Services.WebMethod] // 注意,要让前台调用的方法,一定要是public和st ...
aspx ajax获取后台数据,aspx界面中，怎么调用后台的方法，处理某个数据
LeetCode 3 Longest Substring Without Repeating Characters 区间,想法难度:1 https://leetcode.com/problems/l ...
ajax获取后台数据出错parsererror
原因是dataType如果为json,返回的数据是text就会报错. 转载于:https://www.cnblogs.com/codeDevotee/p/9855751.html
vue绑定后台数据ajax,vueJS 获取后台数据绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...

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

bootstrap table通过ajax获取后台数据展示在table相关推荐

最新文章

热门文章