tableSorter slow loading - model-view-controller

Question

I am using a tablesorter plugin with filter, paging and sorting on a big table. The style is applying very slow on page load (user sees an unformatted table). I was thinking to simply hide the table until it is completely loaded.
How can I achieve this?
Here is my tableSorter initialization code:
$("#report").tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ["zebra", "filter", "savePagerSize"],
widgetOptions: {
filter_childRows: false,
filter_columnFilters: true,
filter_cssFilter: 'tablesorter-filter',
filter_filteredRow: 'filtered',
filter_formatter: null,
filter_functions: null,
filter_hideFilters: false,
filter_ignoreCase: true,
filter_liveSearch: true,
filter_searchDelay: 300,
filter_serversideFiltering: false,
filter_startsWith: false,
filter_useParsedData: false
}
}).tablesorterPager({
container: $("#pager")
});

Answer 1

You can hide the table by default and set the Style as Display: none.
And make is visible in Document ready by changing style to display = 'block'.
works for me.

Answer 2

In some cases, it's helpful to display some of the rows for positioning purposes. In that case, you start by hiding some of the rows while the page loads so it doesn't have as much rendering work to do, and then once the table's been initialized, make sure they're all visible.
/* hide bulk of table until it's been initialized'*/
.tablesorter tbody tr:nth-child(n+10),
.tablesorter tfoot tr {
display: none;
}
/* if we've been decorated, we've been initialized */
.tablesorter.tablesorter-bootstrap tbody tr,
.tablesorter.tablesorter-bootstrap tfoot tr {
display: table-row
}
Tablesorter will automatically decorate the table with any widget classes once it's been initialized. If you don't have any widgets, you can add your own class to the table by tapping into the tablesorter-initialized event
$("table").tablesorter({
// this is equivalent to the above bind method
initialized : function(table){
$(table).addClass('tableInit');
}
});
Demo in Plunker