Home > Article > Web Front-end > Detailed explanation of how jquery plug-in tablesorter implements html table usage examples

Detailed explanation of how jquery plug-in tablesorter implements html table usage examples

伊谢尔伦Original: 2017-07-22 09:56:502594browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to how JavaScript and HTML5 implement canvas drawing circular patternsNext article：Introduction to how JavaScript and HTML5 implement canvas drawing circular patterns

See more

Detailed explanation of how jquery plug-in tablesorter implements html table usage examples

Related articles