在处理API数据的领域工作？想要将数据转换为HTML表，以便您或您的用户更容易阅读吗？需要一种快速处理JSON数据的方法，而不必编写自己的解析器代码吗？如果您对其中任何一个问题的回答都是肯定的，那么这个jQuery插件就是为您准备的。

JSON（JavaScript对象表示法）最常见的用途之一是在两个应用程序之间共享结构化数据。在本文中，我将介绍一个全新的jQuery插件，它可以通过一个JS调用轻松地将复杂的JSON数据转换为HTML表。让我们开始吧。

参见：

• JavaScript中的10个最佳表导出插件
• JavaScript中的10个最佳在线JSON数据转换器

如何使用它:

1.在jQuery之后加载jQuery jsontotable.js插件的缩小版。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.jsontotable.min.js" ></script>

2.创建一个容器来容纳HTML表。

<div id="tableContainer"></div>

3.初始化该容器上的插件，并指定应转换为表的数据源。

$("#tableContainer").flexiTable({
  data : [
    [ "a", "b", "c" ],
    [ "m", "n", "o" ],
    [ "x", "y", "z" ]
  ],
});

4.您还可以通过AJAX从外部数据源获取JSON数据。

$("#tableContainer").flexiTable({
  data : '/path/to/your/data/',
  refreshPriod: null, // refetch data from data source
});

5.为表分配一个唯一的ID和/或CSS类。

$("#tableContainer").flexiTable({
  data : yourData,
  tableCssClass : 'mytable',
  tableId : 'exampleTable',
});

6.自定义项目之间的分隔符。默认值：“，”。

$("#tableContainer").flexiTable({
  data : yourData,
  arraySeperator : ', '
});

7.确定是否启用RTL模式。默认值：false。

$("#tableContainer").flexiTable({
  data : yourData,
  rtl : true,
});

8.确定是否启用RTL模式。默认值：false。

$("#tableContainer").flexiTable({
  data : yourData,
  rtl : true,
});

9.对专栏标题进行删减。

$("#tableContainer").flexiTable({
  data : yourData,
  columnsTitle :{
    "Name" : "Full Name",
     "Id" : "Student ID",
     "Overal.S1" : "Autumn Semester",
     "Overal.S2" : "Spring Semester",
  }
});

10.确定是否允许垂直表头。

$("#tableContainer").flexiTable({
  data : yourData,
  verticalHeaders : true,
});

11.指定单元格中数组项之间的字符。

$("#tableContainer").flexiTable({
  data : yourData,
  arraySeparator : ', ',
});

更新日志：

2023-04-11

• 更新jquery.flexitable.js

2023-01-20

• 添加了arraySeparator选项

2023-01-20

• 添加垂直页眉方向功能

2023-01-20

• 添加检查列的可用性标题

2023-01-18

• 添加自定义列标题

2023-01-17

• 将函数名称更改为flexiTable

2022-12-30

• 更新jquery.flexitable.js

2022-12-07

• 检查loadData中的空字符串

预览截图

JSON数据到HTML表转换器 jQuery FlexiTable