For details about how to use the jQuery html table sorting plug-in tablesorter, jquerytablesorter

Source: Internet
Author: User

For details about how to use the jQuery html table sorting plug-in tablesorter, jquerytablesorter

Tablesort is a useful jQuery table sorting plug-in. Supports sorting of multiple data types, and automatically identifies the Data Types of table content, which is also very convenient to use.
Use jQuery tablesort to implement html tables:

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 the thead and tbody labels to mark the table header and table body.
C. Use the th tag to define the header in thead.
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:
In the body, the tablesorter () function is called for the sorted table css class specified in step 2:

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

In the preceding three steps, jQuery tablesort can sort html tables.

Download the jQuery tabins tablesort

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.