1. 背景

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

2.修改前代码

  1. <div>
  2. <table id="table"
  3. data-toggle="table"
  4. data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"
  5. data-pagination="true"
  6. data-search="true"
  7. data-show-columns="true"
  8. data-show-refresh="true"
  9. data-show-toggle="true"
  10. data-page-number="1"
  11. data-page-size="15"
  12. data-sort-name="create_time"
  13. data-sort-order="desc"
  14. data-page-list="[10, 25, 50, 100, All]"
  15. data-click-to-select="true"
  16. data-single-select="true"
  17. data-toolbar="#toolbar">
  18. <thead>
  19. <tr>
  20. <th data-field="state" data-checkbox="true"></th>
  21. <th data-field="scene_name" data-switchable="true">推荐位名称</th>
  22. <th data-field="scene" data-switchable="true">场景</th>
  23. <th data-field="creater" data-switchable="true">创建者</th>
  24. <th data-field="create_time" data-sortable="true" data-switchable="true">创建时间</th>
  25. <th data-field="managers" data-switchable="true">授权账号</th>
  26. </tr>
  27. </thead>
  28. </table>
  29. </div>

3. 修改后代码

    1. <div>
    2. <table id="table">
    3. </table>
    4. </div>
    5. $(function(){
    6. $('#table').bootstrapTable({
    7. ajax : function (request) {
    8. $.ajax({
    9. type : "GET",
    10. url : "http://guessulike.config.58corp.com/gulrecomserviceweb/gulrecall/getscene",
    11. contentType: "application/json;charset=utf-8",
    12. dataType:"jsonp",
    13. data:'',
    14. jsonp:'callback',
    15. success : function (msg) {
    16. request.success({
    17. row : msg
    18. });
    19. $('#table').bootstrapTable('load', msg);
    20. },
    21. error:function(){
    22. alert("错误");
    23. }
    24. });
    25. },
    26. toolbar:'#toolbar',
    27. singleSelect:true,
    28. clickToSelect:true,
    29. sortName: "create_time",
    30. sortOrder: "desc",
    31. pageSize: 15,
    32. pageNumber: 1,
    33. pageList: "[10, 25, 50, 100, All]",
    34. showToggle: true,
    35. showRefresh: true,
    36. showColumns: true,
    37. search: true,
    38. pagination: true,
    39. columns: [{
    40. field: "state",
    41. checkbox:true,
    42. },{
    43. field: 'scene_name',
    44. title: '推荐位名称',
    45. switchable: true
    46. }, {
    47. field: 'scene',
    48. title: '场景',
    49. switchable: true
    50. }, {
    51. field: 'creater',
    52. title: '创建者',
    53. switchable: true
    54. }, {
    55. field: 'create_time',
    56. title: '创建时间',
    57. switchable: true,
    58. sortable: true
    59. }, {
    60. field: 'managers',
    61. title: '授权账号',
    62. switchable: true
    63. }],
    64. });
    65. }

bootstrap table通过ajax获取后台数据展示在table的更多相关文章

  1. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  2. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  3. 前台通过ajax获取后台数据,PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  4. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  5. jquery ajax获取后台数据后无法输出

    今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...

  6. ajax获取后台数据出错parsererror

    原因是dataType如果为json,返回的数据是text就会报错.

  7. ajax获取后台数据渲染(整片文章不分段落)解决方案,要使用htmL方式输出

    方案一:使用 HTML pre tag<div class="content"><pre> {{ text_data }}</pre></ ...

  8. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  9. jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文

    jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...

随机推荐

  1. superobject 设定排序方式

    (* * Super Object Toolkit * * Usage allowed under the restrictions of the Lesser GNU General Public ...

  2. Win32窗口创建过程

    编写窗口程序的步骤:    1 定义WinMain函数    2 定义窗口处理函数–自己定义处理消息    3 注册窗口类(往OS写入数据)    4 创建窗口 (在内存中创建窗口)    5 显示窗 ...

  3. VIRTIO概述和基本原理

    http://smilejay.com/2012/11/virtio-overview/ (KVM连载)5.1.1 VIRTIO概述和基本原理(KVM半虚拟化驱动) 11/15/2012MASTER  ...

  4. Android: 通过Runtime.getRuntime().exec调用底层Linux下的程序或脚本

    Android Runtime使得直接调用底层Linux下的可执行程序或脚本成为可能 比如Linux下写个测试工具,直接编译后apk中通过Runtime来调用 或者写个脚本,apk中直接调用,省去中间 ...

  5. Docker_network相关指令

    docker network create创建docker网卡docker network create -d overlay --ip-range=192.168.2.0/24 --gateway= ...

  6. 【转】python平台libsvm安装

    来源:http://blog.csdn.net/prom1201/article/details/51382358 网上有很多麻烦的在win64机器上安装libsvm的步骤,实际上只要在下面网站找到l ...

  7. Linux下安装配置MongoDB数据库

    说明: 操作系统:CentOS 5.X 64位 IP地址:192.168.21.130 实现目的: 安装配置MongoDB数据库 具体操作: 一.关闭SElinux.配置防火墙 1.vi /etc/s ...

  8. nagios监控远程端口

    check_port 位置:/usr/local/nagios/libexec/ 代码(新建可执行文件) #!/bin/sh /usr/local/nagios/libexec/check_tcp - ...

  9. C#字符串替换_无视大小写

    C#里的string.Replace是不能无视大小写的. 首先想到的是正则表达式,在网上查了下,果然有用正则表达式配合一些逻辑运算,实现无视大小写的字符串替换方法.但是正则表达式的方法用起来很麻烦,实 ...

  10. avalon实现分页组件

    前言 分页组件比较常见,但是用avalon实现的见的不多,这个分页组件,可以适配2种分页方式, 第一种是每次点击下一页,就请求一次后台,并返回当页数据和总条数,我称之为假分页: 第二种是一次性把所有数 ...