Search code examples
javascriptjqueryhtmltablesorter

I want the table to be sorted in a particular order on load using tablesorter

I have a table which displays like this when I load the page. enter image description here

But I want the subjects to be in a particular order(math,history,science and physics) but the professor names should be sorted in ascending order.enter image description here

Can this be done using tablesorter's custom sort? 

$('table').tablesorter({
    theme: 'blue'
});
<link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th>subject</th>
      <th>professor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>math</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Kent</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Wayne</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Richards</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Xavier</td>
    </tr>
    <tr>
      <td>science</td>
      <td>Arthur</td>
    </tr>
    <tr>
      <td>science</td>
      <td>John</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Steve</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Wade</td>
    </tr>
  </tbody>
</table>

JSFiddle

Any help is appreciated. Thanks in advance.

Solution

  • To set a custom sort order you should add your own parser. Check this example in the docs.

    Then, to order by default both columns, just pass sortList to your configuration object.

    And to add an additional forced sort that will be appended to the dynamic selections by the user use sortAppend.

    Note that in the snippet below I have switched "Steve" and "Wade" so you can see that the sortList is working.

    // add parser through the tablesorter addParser method
$.tablesorter.addParser({
  // set a unique id
  id: 'subjects',
  is: function(s, table, cell, $cell) {
    // return false so this parser is not auto detected
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    // format your data for normalization
    return s.toLowerCase()
      .replace(/math/,0)
      .replace(/history/,1)
      .replace(/science/,2)
      .replace(/physics/,3);
  },
  // set type, either numeric or text
  type: 'numeric'
});

$('table').tablesorter({
    theme: 'blue', 
    sortList: [[0,0], [1,0]],
    sortAppend : [[1,0]]
});
    <link href="https://mottie.github.io/tablesorter/css/theme.blue.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>


<table class="tablesorter">
  <thead>
    <tr>
      <th class="sorter-subjects">subject</th>
      <th>professor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>math</td>
      <td>Jordan</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Kent</td>
    </tr>
    <tr>
      <td>math</td>
      <td>Wayne</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Richards</td>
    </tr>
    <tr>
      <td>history</td>
      <td>Xavier</td>
    </tr>
    <tr>
      <td>science</td>
      <td>Arthur</td>
    </tr>
    <tr>
      <td>science</td>
      <td>John</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Wade</td>
    </tr>
    <tr>
      <td>physics</td>
      <td>Steve</td>
    </tr>
  </tbody>
</table>