bootstrap table通过ajax获取后台数据展示在table
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
- }],
- });
- }
bootstrap table通过ajax获取后台数据展示在table的更多相关文章
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
- 前台通过ajax获取后台数据,PHP如何返回中文数据
现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
- jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
- ajax获取后台数据出错parsererror
原因是dataType如果为json,返回的数据是text就会报错.
- ajax获取后台数据渲染(整片文章不分段落)解决方案,要使用htmL方式输出
方案一:使用 HTML pre tag<div class="content"><pre> {{ text_data }}</pre></ ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...
随机推荐
- ssh无密码登录和scp无密码拷贝
目的:在A主机上无密码登录B主机 方法: A主机生成密钥:ssh-keygen -t rsa 将密钥复制到B主机:cat ~/.ssh/id_rsa.pub | ssh root@B 'cat > ...
- BeautifulSoup库应用实例
获取博客园本人的积分排名数据: 1. 抓包获取积分排名数据返回接口:http://www.cnblogs.com/belle-ls/mvc/blog/sidecolumn.aspx?blogApp=b ...
- PIE SDK点元素的绘制
1. 功能简介 在数据的处理中会用到点元素的绘制,目前PIE SDK支持IMarkerSymbol的点元素的绘制,MarkerSymbol对象是用于修饰点状对象的符号,它包括ArrowMarkerSy ...
- vue filters过滤器的使用
说的很详细 https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
- Win32 进程间通信的分析与比较
1 进程与进程通信 进程是装入内存并准备执行的程序,每个进程都有私有的虚拟地址空间,由代码.数据以及它可利用的系统资源(如文件.管道等)组成.多进程/多线 程是Windows操作系统的一个基本特征.M ...
- ansible 命令详解{图片详解}
本文内容来至于http://www.zsythink.net 文件操作模块 命令操作模块 cron 包管理模块
- 网站加入QQ聊天链接
有时候我们的网站需要加入客服聊天功能,实现方式各不相同同,对于流量不大的网站,可以加入qq聊天的链接,点击链接,会打开本地qq的聊天窗口, 和指定的人会话.实现方式很简单,就是一个<a>标 ...
- ORACLE 查询被锁定表及解锁释放session的方法
后台数据库操作某个表时处于假死状态,可能该表被某个用户锁定,导致其他用户无法继续操作, 如下是解决方案和实例. 查被锁的表,以及用户 SELECT object_name, machine, s.si ...
- Smart3D基础理论
目录: 1. Smart3D发展进程 2. 硬件要求与建模原理 3. Smart3D建模优势 4.Smart3D的应用领域 5. Smart3D的软件组成 6. Samrt3D主控台概述 1. Sma ...
- Visual Studio 安装OpenCV及问题总结
1.VS安装OpenCV基本步骤 1)安装Visual Studio 下载网址https://opencv.org/releases.html# 2)安装OpenCV 下载网址https://www. ...