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