Tablesorter creato dynamicmente non funziona

Aggiornato: dai un’occhiata a questo violino :

Voglio usare il tablesorter e il suo plugin di intestazione appiccicoso per le tabelle create dynamicmente. Ma ho difficoltà a far funzionare il codice, nonostante l’inclusione di $('.tablesorter').trigger('updateAll'); e $(".tablesorter").tablesorter(options); alla fine del ciclo.

Qualcuno può indicare cosa c’è di sbagliato con il seguente codice?

  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 += ""; chunks[i].map(function (v, key) { item_html += ""; }); item_html += ""; chunks[i].map(function (v) { item_html += ""; }); item_html += "
" + key + "
" + v.number + "
"; $(".tablesorter").tablesorter(options); $('.tablesorter').trigger('updateAll'); } $('#area').append(item_html)

Il problema è che il tablesorter viene richiamato su elementi che non esistono.

Sposta $(".tablesorter").tablesorter(options); essere chiamato dopo che l’HTML è stato aggiunto area div. Il metodo updateAll non è affatto necessario ( demo ):

  chunks[i].map(function (v) { item_html += "" + v.number + ""; }); item_html += ""; // $(".tablesorter").tablesorter(options); // $('.tablesorter').trigger('updateAll'); } $('#area').append(item_html); $(".tablesorter").tablesorter(options);