使用 JQuery 从 JSON 创建 HTML 表，尝试使用 Tablesorter 插件进行排序，但不工作答案

【问题标题】：Creating HTML table from JSON with JQuery, trying to sort with Tablesorter plugin, but not working使用 JQuery 从 JSON 创建 HTML 表，尝试使用 Tablesorter 插件进行排序，但不工作
【发布时间】：2016-01-19 22:40:23
【问题描述】：

我在让 tablesorter 处理使用 JQuery 从 JSON 数据创建的 HTML 表时遇到了一些问题。我创建了表格，当我单击它们时列标题突出显示，但它不对数据进行排序。创建表的 JQuery 是这样的：

function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);

     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
 }

function addAllColumnHeaders(myList) {
     var columnSet = [];
     var headerTr$ = $('<thead/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
 }

这将构建表格，并具有 tablesorter 所需的 THEAD 和 TBODY 标签。然后我创建表并像这样运行 tablesorter 函数：

$(document).ready(function() { 
  buildHtmlTable();
  $('#excelDataTable').tablesorter();

});

这是 HTML：

<body>

  <table id="excelDataTable" class="tablesorter">
  </table>

</body>

当我单击表格标题时，它们会以蓝色框突出显示（就像它们知道被单击一样），但它们不会排序。我认为这与动态创建表格有关，因为表格排序器将使用硬编码的 HTML 表格。但是对于这个应用程序，我将获取 JSON 数据，并且需要根据我收到的内容构建表格。表数据不会动态更改，它只是以这种方式创建的。任何帮助表示赞赏，如果需要，肯定会发回更多详细信息。提前致谢！

【问题讨论】：

我知道您在哪里创建thead，但您在哪里创建tbody？似乎表格行 (<tr>) 直接通过 $("#excelDataTable").append(row$); 附加到 <table> 元素，而不是附加到 <table><tbody>...？
如果您使用我的fork of tablesorter，它包括一个build widget，它可以从数组、CSV 或 JSON 数据加载和构建您的表。
感谢大家的回复！我也想知道它建的桌子。当我检查代码生成的 HTML 时，它看起来还不错。不过，我可以仔细检查一下。我将尝试您链接 Mottie 的构建小部件。
Mottie 那个小部件效果很好，谢谢！

标签： jquery html json tablesorter

【解决方案1】：

Mottie 关于使用构建小部件的建议对我有用。我将包含数据的文件格式从 JSON 更改为 CSV。 Javascript是

$(function() {
  $('#excelDataTable').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : { url: 'data.txt', dataType: 'text' },
      build_headers   : {
        widths  : ['50%']
      }
    }
  });
});

而 HTML 很简单

<body>

  <div id="excelDataTable"></div>

</body>

此外，我确实需要进行一些调整才能让 chrome 使用本地托管的文件，但这在 IE 中立即起作用。

【讨论】：