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][1]



    $("table").tablesorter({
      // this is equivalent to the above bind method
      initialized : function(table){
        $(table).addClass('tableInit');
      }
    });


### Demo in [Plunker][2]

[1]: https://mottie.github.io/tablesorter/docs/index.html#events
[2]: https://plnkr.co/edit/llPmkuQo7EXBLWnmaJOK

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")
    });

tableSorter slow loading

Alternatively, you can create a table from JSON using the the [Build Table Widget][3] 

Make sure you include the build table widget:



<pre><code>&lt;script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js">https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js</a>";&gt;&lt;/script&gt;
</code></pre>


If you have an array of values, you can add the header to the first row like this:



<pre><code>var tableData = [
  <b>// header
  [ "Move", "Start Up"],</b>
  // rows
  [ "Phoenix Smasher", 15],
  [ "Bone Breaker",    16],
  [ "DeathFist",       60],
  [ "Thruster",        20],
  [ "S Jab",           10]
]
</code></pre>

Then pass the array and some params to the build source options in to the `widgetOptions`  like this:


    
    $("#jsonTable").tablesorter({
      theme: 'materialize',
      widgets: ['zebra'],
      widgetOptions: {
        build_type: 'array', 		  // can sometimes be detected if undefined
        build_source: tableData,
        build_headers: {
          rows    : 1,  			  // Number of header rows from the array
          widths  : [ '70%', '20%' ]  // set header cell widths
        },
        build_footers : {
          rows    : 0,  		      // Number of header rows from the array
        },
      }
    });

### Demo in [jsFiddle][5] & StackSnippets:





    var tableData = [
      // header
      [ "Move" , "Start Up"],
      // rows
      [ "Phoenix Smasher", 15],
      [ "Bone Breaker", 16],
      [ "DeathFist", 60],
      [ "Thruster", 20],
      [ "S Jab", 10]
    ]

    $("#jsonTable").tablesorter({
      theme: 'materialize',
      widgets: ['zebra'],
      widgetOptions: {
        build_type: 'array', 		 		// can sometimes be detected if undefined
        build_source: tableData,
        build_headers: {
          rows    : 1,  						 // Number of header rows from the array
          widths  : [ '70%', '20%' ] // set header cell widths
        },
        build_footers : {
          rows    : 0,  						 // Number of header rows from the array
        },
      }
    });



    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.materialize.min.css" rel="stylesheet"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.combined.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js"></script>


    <div id="jsonTable"></div>



**Further Reading**:

* [Issue #31 - Tablesorter + json data support][1]
* [Issue #500 - Initializing tablesorter from a JavaScript array or JSON data][2]
* [SO - Creating HTML table from JSON with JQuery][4]

[2]: https://github.com/Mottie/tablesorter/issues/500
[1]: https://github.com/Mottie/tablesorter/issues/31
[3]: https://mottie.github.io/tablesorter/docs/example-widget-build-table.html
[4]: https://stackoverflow.com/q/34888340/1366033
[5]: http://jsfiddle.net/KyleMit/f18s5mwp/

I am trying to use the jQuery plugin tablesorter (tablesorter.com) on an html table that is generated by a javascript array when my page loads. The table gets styled, by the table won't sort when the column headers are clicked.

Here is what I have so far:

    <!DOCTYPE html>
    <html>
    <head>
	  <script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
	  <script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.js"></script>
	  <link type="text/css" rel="stylesheet" href="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.css">
	
	  <script type="text/javascript" src="/lib/jquery/tablesorter/jquery.tablesorter.js"></script>
	  <link type="text/css" rel="stylesheet" href="/lib/jquery/tablesorter/themes/blue/style.css">
	  <style>
	  </style>
	  <script>
		$( document ).ready( function() {
			$( "table" ).tablesorter();
		
			$( "p" ).click( function() {
				$( this ).hide();
			});
		});
		
		$( function() {
			$( "#datepicker" ).datepicker();
		});
		
	  </script>
	  <script>
	    var frameData = [
		  ["Phoenix Smasher", 15],
		  ["Bone Breaker", 16],
		  ["DeathFist", 60],
		  ["Thruster", 20],
		  ["S Jab", 10]
	    ];

	    function pageLoad() {
		  var t = "";
		  t += "<thead>";
		  t += "<tr>";
		  t += "<th>Move</th>";
		  t += "<th>Start Up</th>";
		  t += "</tr>";
		  t += "</thead>";
		  t += "<tbody>";
		  for (var i = 0; i < frameData.length; i++) {
			t += "<tr>";
			t += "<td>" + frameData[i][0] + "</td><td>" + frameData[i][1] + "</td>";
			t += "</tr>";
		  }
		  t += "</tbody>";
		  document.getElementById("frameTable").innerHTML = t;
	    }
	  </script>
    </head>
    <body onload="pageLoad()">
	  <p>Click the table headers to sort the array in descending order.</p>
	  <br />
	  <br />
	  <div id="demo"></div>
	  <table id="frameTable" class="tablesorter">
	  </table>

	  <p>jQuery test. This text will disappear on click.</p>
	  <input type="text" id="datepicker">
    </body>
    </html>

<b>What I've tried:</b> Oddly enough, when I get rid of the javascript array and place actual html table data in between the `<table>` and `</table>` tags, the tablesorter plugin works fine. Also, I've tried re-arranging the array and `pageLoad()` function with the jQuery code, with no luck at all.

Any idea how to get this to work?

The page is on my server: http://sketchcarellz.com/multiArray.html