动态创建的 Tablesorter 不起作用答案

【问题标题】：Dynamically created Tablesorter not working动态创建的 Tablesorter 不起作用
【发布时间】：2014-07-15 00:34:07
【问题描述】：

我想为动态创建的表使用 tablesorter 及其粘性标题插件。但是，尽管在循环末尾包含了 $('.tablesorter').trigger('updateAll'); 和 $(".tablesorter").tablesorter(options);，但我无法让代码正常工作。

谁能指出以下代码有什么问题？

  var options = {
    widthFixed : true,
    showProcessing: true,
    headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!

    widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {

      // extra class name added to the sticky header row
      stickyHeaders : '',
      // number or jquery selector targeting the position:fixed element
      stickyHeaders_offset : 0,
      // added to table ID, if it exists
      stickyHeaders_cloneId : '-sticky',
      // trigger "resize" event on headers
      stickyHeaders_addResizeEvent : true,
      // if false and a caption exist, it won't be included in the sticky header
      stickyHeaders_includeCaption : true,
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 2,
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : null,
      // scroll table top into view after filtering
      stickyHeaders_filteredToTop: true,

      // adding zebra striping, using content and default styles - the ui css removes the background from default
      // even and odd class names included for this demo to allow switching themes
      zebra   : ["ui-widget-content even", "ui-state-default odd"],
      // use uitheme widget to apply defauly jquery ui (jui) class names
      // see the uitheme demo for more details on how to change the class names
      uitheme : 'jui'
    }

  };





var data = [{
    number: '1'
}, {
    number: '2'
}, {
    number: '3'
}, {
    number: '4'
}, {
    number: '5'
}, {
    number: '6'
}, {
    number: '7'
}, {
    number: '8'
}, {
    number: '9'
}, {
    number: '10'
}];
var chunks = [];
var item_html = "";
for (var i = 0; i < data.length;) {
    chunks.push(data.slice(i, i += 3));
}
for (var i = 0; i < chunks.length; i++) {

    item_html += "<table class='tablesorter'><thead><tr>";

    chunks[i].map(function (v, key) {
        item_html += "<th>" + key + "</th>";
    });
    item_html += "</tr></thead><tbody><tr>";

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";
    $(".tablesorter").tablesorter(options);    

    $('.tablesorter').trigger('updateAll');

}

$('#area').append(item_html)

【问题讨论】：

我不认为我理解这个问题。您正在创建 4 个表，每个表的正文中只有 1 行。什么会被排序？我认为您的问题在于如何创建元素，而不是表格排序器。

标签： javascript jquery html tablesorter

【解决方案1】：

问题是对不存在的元素调用 tablesorter。

在将 HTML 附加到 area div 之后，移动要调用的 $(".tablesorter").tablesorter(options);。根本不需要updateAll 方法（demo）：

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";
    // $(".tablesorter").tablesorter(options);    

    // $('.tablesorter').trigger('updateAll');

}

$('#area').append(item_html);
$(".tablesorter").tablesorter(options);

【讨论】：