Using jQuery tablesorter with javascript table array

Question

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>

What I've tried: 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

Is that going to solve the problem? I'll try to do that now. — aCarella
– aCarella, Commented May 9, 2015 at 18:55
I placed all of my pageLoad and array code under $( document ).ready, and that did not solve the issue. I then tried to place all of my code in ( document ).ready under pageLoad, and that did not work either. Your suggestion does not contribute to a solution for my issue. — aCarella
– aCarella, Commented May 9, 2015 at 19:00

charlietfl · Accepted Answer · 2015-05-09 19:09:30Z

1

Your issue is you are initializing the plugin before the table is built.

Switch the order of execution. To do this only use one load handler to be assured you know the sequencing

$( document ).ready( function() {
     pageload();
    // table is build, call plugin
    $( "table" ).tablesorter();
});

answered May 9, 2015 at 19:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

there is a lot more under the hood than just what you see in the html. Internal caching inside plugin etc

KyleMit · Accepted Answer · 2018-10-13 20:21:29Z

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

Make sure you include the build table widget:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js";></script>

If you have an array of values, you can add the header to the first row like this:

var tableData = [
  // header
  [ "Move", "Start Up"],
  // rows
  [ "Phoenix Smasher", 15],
  [ "Bone Breaker",    16],
  [ "DeathFist",       60],
  [ "Thruster",        20],
  [ "S Jab",           10]
]

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:

Collectives™ on Stack Overflow

Using jQuery tablesorter with javascript table array

2 Answers 2

1 Comment

Demo in jsFiddle & StackSnippets:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Demo in jsFiddle & StackSnippets:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related