How to use jQuery sort plug in tableSorter

  • 2021-07-18 07:04:40
  • OfStack

In this article, we share the use of jQuery sorting plug-in tableSorter for your reference. The specific contents are as follows

1. Start with two js


<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.tablesorter.min.js"></script>

Note: thead/th and tbody should be used in the table. Such as:


<table id="myTable"> 
<thead> 
<tr> 
  <th>Last Name</th> 
  <th>First Name</th> 
  <th>Email</th> 
  <th>Due</th> 
  <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
  <td>Smith</td> 
  <td>John</td> 
  <td>jsmith@gmail.com</td> 
  <td>$50.00</td> 
  <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
  <td>Bach</td> 
  <td>Frank</td> 
  <td>fbach@yahoo.com</td> 
  <td>$50.00</td> 
  <td>http://www.frank.com</td> 
</tr> 
</tbody>
<table>

3. Call the sort js code


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

Go back to the page and click on line 1 to sort.

ps:

1.1 Be sure to import the jQuery package, and all jq plug-ins are based on the jQuery package

2. Write this if you want to specify which 1 column is not sorted

$("#mytable").tablesorter({headers:{5:{sorter:false}}});

If sorter in column 5 is false, then OK


Related articles: