jQuery html table sorting plug in tablesorter usage details

2021-07-18 07:04:20
OfStack

tablesort is an easy-to-use jQuery table sorting plug-in. Support a variety of data type sorting, will automatically identify the table content data type, it is also very convenient to use.
Implement the html table method using jQuery tablesort:

1. Download the jQuery and tablesort scripts and reference the script file in html:


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

2. Format the html table to be sorted:

a. Specify the CCS class for the table to be sorted: class= "sort-table"
b. Use thead and tbody tags to mark table headers and table bodies
c. In the table header thead, you need to use the th tag to define the table header
The formatted html table is as follows:


<table border=1 width="800px" class="sort-table">
<thead>
 <tr>
 <th>Date</th>
 <th>Usage</th>
 <th>Cost</th>
 <th>Remain</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>2008-3-25</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-40</td>
 </tr>
 <tr>
 <td>2008-4-1</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-80</td>
 </tr>
</tbody>
</table>

3. Add the jQuery code to enable html table sorting:
Call the tablesorter () function in body on the sort table css class specified in Step 2:


<body>
<script type="text/javascript">
 $(document).ready(function() {
 $(".sort-table").tablesorter(); 
 });
</script>

With the above three steps, jQuery tablesort can sort the html table.

Download jQuery plug-in tablesort