CODEWITHSUNDEEP
javascriptjqueryhtml
Frog82
Frog82

Reputation: 464

jQuery - TableSorter not working

I cant seem to figure out why the tablesorter jQuery plugin does not seem to work. I have included both the JavaScript files and the css file (although not required) and initialized it. Any ideas?

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#supplierTable").tablesorter();
    });
</script>

<table class="tablesorter table table-striped table-hover table-curved" id="supplierTable" name="supplierTable">

Upvotes: 0

Views: 1734

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

After you load the jQuery TableSorter plugin script and a theme, you need to pass the theme that you have loaded into the jQuery.tablesorter method.

$(document).ready(function() {
  $("#supplierTable").tablesorter({
    // Select the theme that was loaded through CSS.
    theme: 'ice',

    // The default sorter will not work for the provided cell data.
    headers: {
      0: { sorter: 'text' },
      1: { sorter: 'text' },
      2: { sorter: 'text' }
    },
  });
});
<!-- Load jQuery if not already loaded. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Load the TableSorter plugin. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/js/jquery.tablesorter.min.js"></script>

<!-- Load a theme i.e. "ice". -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/css/theme.ice.min.css" rel="stylesheet" />

<table id="supplierTable" name="supplierTable" class="tablesorter table table-striped table-hover table-curved">
  <thead>
    <tr> <th>A</th> <th>B</th> <th>C</th> </tr>
  </thead>
  <tbody>
    <tr> <td>0.0, 0</td> <td>1.1, 0</td> <td>2.2, 0</td> </tr>
    <tr> <td>0.1, 1</td> <td>1.2, 1</td> <td>2.0, 1</td> </tr>
    <tr> <td>0.2, 2</td> <td>1.0, 2</td> <td>2.1, 2</td> </tr>
  </tbody>
</table>

Upvotes: 2

david tallon
david tallon

Reputation: 424

You have a couple issues that I can see:

First, The order you include JS libraries matters. You have to take dependencies into account. This means you cannot load one library that is dependant on another before the one it is dependant on. In this case, sortable.js is dependant on JQuery library and so therfore must be loaded after.

Second, The documentation for the sortable.js says you need to class your table as "sortable".

So try this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/sortable.js"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            $("#supplierTable").tablesorter();
        });
    </script>

    <table class="tablesorter table table-striped table-hover table-curved sortable" id="supplierTable" name="supplierTable">

Upvotes: 0

Related Questions