CODEWITHSUNDEEP
javascriptjqueryhtmltablesorter
RedGiant
RedGiant

Reputation: 4748

Dynamically created Tablesorter not working

Updated: Please take a look at this fiddle:

I want to use the tablesorter and its sticky header plugin for the dynamically created tables. But I have trouble getting the code to work, despite the inclusion of $('.tablesorter').trigger('updateAll'); and $(".tablesorter").tablesorter(options); at the end of the loop.

Can anyone point out what's wrong with the following code?

  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)

Upvotes: 0

Views: 898

Answers (1)

Mottie
Mottie

Reputation: 86403

The problem is that tablesorter is being called on elements that don't exist.

Move the $(".tablesorter").tablesorter(options); to be called after the HTML has been appended to the area div. The updateAll method isn't needed at all (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);

Upvotes: 2

Related Questions