Using jQuery tablesorter with javascript table array

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

Answer

October 13, 2018

KyleMit

Alternatively, you can create a table from JSON using the the Build Table Widget

Make sure you include the build table widget:

<pre><code><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>";></script> </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 & 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: