tablesort is a very useful jQuery table sorting plug-in. It supports sorting of multiple data types and will automatically identify the data type of table content, making it very convenient to use.
Use jQuery tablesort to implement the html table method:
1. Download 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 that needs to be sorted:
a. Specify the CCS class for the table that needs to be sorted: class="sort-table"
b. Use thead and tbody tags to mark the table header and table body
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 jQuery code to enable html table sorting:
Call the tablesorter() function in the body on the sorted table css class specified in the second step:
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".sort-table").tablesorter();
});
</script>Through the above 3 steps, jQuery tablesort can sort html tables.
The above is the detailed content of Detailed explanation of how jquery plug-in tablesorter implements html table usage examples. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
