Question

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

我已经让许多其他表上的tableorter工作，但那些是静态的。我无法使用Ajax接收的数据在动态构建的表上工作。 AFAIK在修改数据后需要使用$('myTable').trigger('updateAll');，这是我正在使用的tablesorter fork的confirmed by the maintainer。

我在JSFiddle上制作了一个小型演示。

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

编辑：
1）我还尝试调用$('myTable').trigger('destroy');，然后重新初始化以替换使用上述updateAll。
2）我也试过等到我构建表格后初始化其上的tablesorter插件。

Answer 1

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

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

更改这些行上的构建表代码以使其正常工作（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不正确，应该以{{1}}

结尾

</tr>

相反，使用字符串构建行：

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

然后触发＆＃34; updateAll＆＃34;。

使用字符串构建HTML的原因是因为尽可能少地与DOM交互以获得最佳性能更好。不是附加每个元素，而是构建HTML字符串并在此示例中添加一次或两次 - 一次用于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);，一次用于thead。

jQuery表分类器在动态构建的表上被破坏

1 个答案: