Bootstrap Table表格一直load不了数据

  bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

  这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据。

  $("#button").click(function(){
        var name=$("input[name=‘name‘]").val();
        $(‘#table‘).bootstrapTable(‘load‘,"../Query/FindMoonByName?name="+name);
    });

  我使用访问远程地址返回的json数据作为数据,完全没问题啊,但是就是出错了。

  解决方法:

  将放回的json数据转换为object对象。

  $("#button").click(function(){
        var name=$("input[name=‘name‘]").val();
        $.ajax({
               type: "POST",
               url:"../Query/FindMoonByName?name="+name,         success: function(msg){           //这里的msg是json对象,不是json字符串。
           $(‘#table‘).bootstrapTable(‘load‘,msg);          }      });   });
  如果你设置返回的响应信息Content-Type为application/json;charset=UTF-8,返回的msg就是json对象。  这时你直接加载就可以。  如果你设置返回的响应信息Content-Type为text/html;charset=UTF-8,返回的msg就是json字符串。  那你需要JSON.stringify(字符串)转为对象再进行加载。

  测试:  Bootstrap-table.js   version: 1.11.1  Bootstrap.js         v3.3.0

  注意:本文解决办法只是针对我的问题解决了,请大家测试好自己的。
时间: 2024-10-07 11:57:48

Bootstrap Table表格一直load不了数据的相关文章

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

django:bootstrap table加载django返回的数据

{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></scrip

Bootstrap Table 表格参数详解

表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-classes String 'table table-hover' 表格的类名称.默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式. sortClass data-sort-class String undefined The class name of the td ele

bootstrap table表格前台分页,点击tab选项,重新刷新表格

近期做项目的时候使用bootstrap表格前台分页,并且有一个tab切换选项,共用一个table,效果如下图,上方是tab选项,下方是table: 在实际实现的时候,在默认状态下,表格翻到了第5页,此时我要按年龄进行筛选,刚开始我的做法是直接$("#table").bootstrapTable('refresh',option):option里边是一个筛选的条件,这样的效果是页面会展示所选条件下第5页的内容,而不是第一页的内容,这就违背了项目的需求,后来经过搜索.探讨找到了一种解决方案

bootstrap table两种分页需要的数据不同

先上原帖地址:http://blog.csdn.net/tyrant_800/article/details/50269723 问题描述: 调用$("#show_list_table").bootstrapTable("refresh");刷新table以后,搜索条件可以传入,也请求到了数据,但是就是不在table中展示数据. 最后发现是因为服务器端分页和客户端分页需要的json格式不一样. 原帖内容: 服务器分页/客户端分页的转换,table刷新 bootstra

bootstrap table入门使用

前言: 刚进公司老大告诉我下个项目需要使用bootstrap,让我了解一下bootstrap table,借此写了一个小demo. js.css: <!-- jquery -->    <script src="js/jquery.min.js" type="text/javascript"></script> <!-- bootstrap -->    <link href="css/bootstra

BootStrap table动态增删改表格内数据

1 1:添加一个[操作]列 2 3   4 5 { 6 title: "操作", 7 align: 'center', 8 valign: 'middle', 9 width: 160, // 定义列的宽度,单位为像素px 10 formatter: function (value, row, index) { //传入数据 11 return '<button class="btn btn-primary btn-sm" onclick="del(

新的表格展示利器 Bootstrap Table Ⅱ

    上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.Bootstrap Bable 全部数据导出分析 在表格导出数据中,发现设置了分页参数,导出的数据仅为表格加载的分页参数数据,于是,针对这样的情况,通过设置分页参数的值,使表格可以加载更多的数据,可达到导出所有数据的功能需求.然而,在实际的实验中,发现此方案存在以下问题: 表格一次加载一千条数据时,网

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二