Question

更新：请查看this fiddle：

我想为动态创建的表使用tablesorter及其sticky header插件。但是，尽管在循环结束时包含$('.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)

Answer 1

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

在将HTML附加到$(".tablesorter").tablesorter(options); div后移动要调用的area。根本不需要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);

动态创建的Tablesorter无法正常工作

1 个答案: