bootstrap table通过ajax获取后台数据展示在table
来源:互联网 发布:守望先锋优化补丁 编辑:程序博客网 时间:2024/05/17 06:28
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}],});}
阅读全文
0 0
- bootstrap table通过ajax获取后台数据展示在table
- 通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件
- bootstrap table ajax获取后台数据后js做判断
- Bootstrap Table获取并展示数据列表
- Bootstrap table的后台数据的获取
- 十四、bootstrap-table 展示数据
- bootStrap table+ajax加载数据
- 通过Ajax请求后台数据,返回JSONArray(JsonObject),页面(Jquery)以table的形式展示
- bootstrap-table 表头数据展示错位
- 给ajax留一个模板,通过后台传递json获取数据,并用table显示,方便以后使用
- bootstrap Table 后台交互
- Bootstrap Table 选中某几行,获取其数据
- table数据如何通过ajax方式加载?
- bootstrap table 绑定数据
- bootstrap table post提交数据,后台无法接收的问题
- ajax 显示json数据在table中
- bootstrap table 获取数据的两种方式
- jquery的ajax后台后去数据的table切换
- 2017年8月26日,周结(二十三),PopupWindow的简单使用
- zzuli 2184 河南多校联萌(5)(非二分)
- RabbitMQ消息队列之一:RabbitMQ的环境安装及配置
- FATAL ERROR: please install the following Perl modules before executing
- 正则表达式详解
- bootstrap table通过ajax获取后台数据展示在table
- python练习题
- 再起航,我的学习笔记之JavaScript设计模式12(适配器模式)
- 2017 8.25 阿里巴巴校招 在线笔试题
- 深入浅出C#(C#指南)
- 单例模式下实现的JDBC工具类
- 配置yum本地源的过程
- ThinkPHP 获取客户端浏览器信息方法
- poj 1797 Heavy Transportation(并查集 OR Kruskal两种实现)