jQuery table 分拣机在动态构建的 table 上损坏

Question

我需要动态构建我的 table，但对它进行排序也是一项要求。

我已经让 tablesorter 在许多其他 tables 上工作，但那些是静态的。我无法使用 Ajax 接收到的数据在动态构建的 table 上运行它。据我所知，您需要在修改数据后使用 $('myTable').trigger('updateAll');，即我正在使用的 table 分拣叉的 confirmed by the maintainer。

我在 JSFiddle 上构建了一个小演示。

关于如何使它对动态 table 进行排序的任何想法，或者这是一个错误？我使用的是最新版本的 tablesorter 插件和 jQuery 1.10.1.

编辑：
1) 我也试过调用 $('myTable').trigger('destroy'); 然后重新初始化它来代替使用上面的 updateAll。
2) 我也试着等到我构建了 table 之后初始化 tablesorter 插件。

Answer 1

如@T.Shah 所述，在 thead 中，th 被添加到 tr 之外。发生这种情况是因为 th 被附加到 thead，而不是此代码中的 tr：

tblHead.append('<th>...</th>');

更改这些行中的构建 table 代码以使其工作 (demo):

// Begin the row
var html = '<tr>';

// Fill the table header (thead) row
for (var i = 0; headerColumns.length - 1 >= i; i++) {
  var id = headerColumns[i]['id'];
  var value = headerColumns[i]['value'];

  // Check to see if this column has an average avalible for it
  if (averages[id]) {
    value = 'Average: ' + averages[id] + '<br />' + value;
  }

  // Write the table head data
  html += '<th id="' + id + '"' + '>' + value + '</th>';
}

// End the row
tblHead.append(html + '</tr>');

在<tbody>中，加行的HTML不正确，应该以</tr>

结尾

tblBody.append('<tr id="tblRow' + key + '"></td>');

而是使用字符串来构建行：

html = "";
// Fill the table body (tbody) with all required rows of data
for (var key in reportData) {
  // Some object properties are inherited, we don't want these
  if (!reportData.hasOwnProperty(key)) {
    continue;
  }

  // Create a new table body row
  html += '<tr id="tblRow' + key + '">';

  // Apply data to each column in the row
  for (var i = 0; reportData[key].length - 1 >= i; i++) {
    var id = reportData[key][i]['id'];
    var value = reportData[key][i]['value'];

    // Write the column data
    html += '<td id="' + id + '"' + '>' + value + '</td>';
  }
  html += '</tr>';
}
tblBody.append(html);

然后触发"updateAll".

使用字符串构建 HTML 的原因是因为最好尽可能少地与 DOM 交互以获得最佳性能。不是附加每个元素，而是构建一个 HTML 字符串并在本示例中添加一次或两次 - 一次用于 thead 一次用于 tbody.

jQuery table 分拣机在动态构建的 table 上损坏

jQuery table sorter broken on dynamically built tables

jquery

tablesorter