Test404 Test404 - 1 month ago 5
HTML Question

Sort table from side menu

It might sounds weird.
I would like to know if it's possible to sort a table by clicking on the side menu link and not from the table header.

enter image description here

I know that we can sort, make pagination... inside the table by using some jQuery libraries.

But my request here is to sort from the side menu and not from the table header.

<table>
<thead>
<tr>
<th>blabla</th>
<th>blabla</th>
</tr>
</thead>
<tbody>
<tr>
<td>blabla</td>
<td>blabla</td>
</tr>
</tbody>
</table>

Answer

You can use tablesorter's sorton event:

$(document).ready(function() {
  $("#mysortable").tablesorter();

  $("#navigator div").click(function() {
    var column = $(this).data("column") - 1;
    $("#mysortable").trigger("sorton", [[[column, 0]]]);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.19.1/js/jquery.tablesorter.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.19.1/css/theme.default.css"/>

<div id="navigator" style="float:left; max-width:200px;">
  <div data-column="1">Sort Column One</div>
  <div data-column="2">Sort Column Two</div>
  <div data-column="3">Sort Column Three</div>
</div>

<table id="mysortable" class="tablesorter" style="float:right; max-width:400px;">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>2</td>
      <td>Z</td>
    </tr>
    <tr>
      <td>C</td>
      <td>3</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>B</td>
      <td>1</td>
      <td>X</td>
    </tr>
  </tbody>
</table>

Comments