如何从 JSON 动态创建 Bootstrap 表

Posted 2023-05-08

【中文标题】如何从 JSON 动态创建 Bootstrap 表

【英文标题】：How to create a Bootstrap table dynamically from JSON

【发布时间】：2021-08-07 11:19:59

【问题描述】：

我不知道如何在不使用任何硬编码标题的情况下将动态 JSON 数据添加到表中。数据取自data-url。

<table id="table" data-toggle="table" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"></table>

$('#table').bootstrapTable()

【问题讨论】：

我用的是bootstrap table API，从这里可以看到bootstrap-table.com/docs/getting-started/introduction，数据是API自己加载的

感谢您的澄清。从 documentation 那里它声明您必须定义 JSON 的列，以便它们可以映射到表中的列。它不允许您在不映射字段的情况下动态加载数据。如果您需要这种行为，我建议您找到另一个库或编写自己的库。

是的，这就是我面临的问题，但是，这是堆栈溢出的解决方案，我不明白***.com/q/52863669/15512069

该解决方案实际上就是我上面提到的“自己编写”方法。如果您难以理解它的工作原理，我建议您研究 AJAX 并查找一些教程。

是的，谢谢你的帮助！！

【参考方案1】：

I found the answer

 var dataSet = [
  Latitude: 18.00,
  state:"odisha",
  Longitude: 23.00,
  Name: "Pune"
, 
  Latitude: 14.00,
  state:"odisha",
  Longitude: 24.00,
  Name: "Mumbai"
, 
  Latitude: 34.004654,
  state:"odisha",
  Longitude: -4.005465,
  Name: "Delhi"
, 
  Latitude: 23.004564,
  state:"odisha",
  Longitude: 23.007897,
  Name: "Jaipur"
]
var temp = JSON.stringify(Object.assign(,dataSet));
var arr = JSON.parse(temp)
console.log(arr)




var my_columns = [];

$.each( dataSet[0], function( key, value ) 
        var my_item = ;
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
);



$(document).ready(function() 
  $('#table').bootstrapTable(
   
    "columns": my_columns,
     data:dataSet
  );
);