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

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

jquery html json

使用JQuery从JSON创建HTML表，尝试使用Tablesorter插件进行排序，但不起作用,jquery,html,json,tablesorter,Jquery,Html,Json,Tablesorter,我在让tablesorter处理使用JQuery从JSON数据创建的HTML表时遇到了一些问题。我创建了表，当我单击它们时，列标题会高亮显示，但它不会对数据进行排序。创建表的JQuery如下所示： function buildHtmlTable() { var columns = addAllColumnHeaders(myList); for (var i = 0 ; i < myList.length ; i++) { var row$ = $(

我在让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;
 }

这是HTML：

<body>

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

</body>

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

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中很快就起作用了。

我知道你在哪里创建

thead

，但是你在哪里创建

tbody

？似乎表行（

）是通过

$（“#excelDataTable”）直接附加到
元素的而不是附加到..？如果您使用的是my，它包含一个可以从数组、CSV或JSON数据加载和构建表的组件。感谢您的回复！我也对它建的桌子感到好奇。当我检查代码生成的HTML时，它看起来还可以。不过我可以再核实一下。我要尝试一下你链接到Mottie的build小部件。这个小部件工作得很好，Mottie，谢谢！
<body>

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

</body>