tableSorter slow loading

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.