jquery Table Sort Component-tablesorter

Source: Internet
Author: User

I. Introduction of DOCUMENTS

<script type= "Text/javascript" src= "js/jquery.js" ></script> <script type= "Text/javascript" src= "js/ Jquery.tablesorter.js ></script> <!--The following styles are introduced, the header appears with the sort icon, and the picture is introduced  --><link href= "Css/style.css" Rel= "stylesheet" type= "Text/css" >
effect



Second, standard HTML table, must include thead and tbody tags

<table id= "myTable" class= "Tablesorter" >      <thead>         <tr>             <th>Name</th>             <th>Sex</th>             <th>Address</th>         </tr>      </thead>      < tbody>         <tr>             <td>zhangsan</td>             <td>boy</td>             <td> beijing</td>             </tr>         <tr>             <td>lisi</td>             <td>girl</td >             <td>shanghai</td>         </tr>         <tr>     ... Slightly        </tr>     

third, set table can be sorted

$ (document). Ready (function () {      //The first column is not sorted (index starting from 0)     $.tablesorter.defaults.headers = {0: {sorter:false}};     $ (". Tablesorter"). Tablesorter (); });

Official document: http://tablesorter.com/docs/


Additional notes:

In the use of the process encountered a problem, my tabular data is obtained through AJAX, the first page to sort the time no problem

When the next page is sorted, the data from the page will be displayed again, solving the problem after you have AJAX access to the data

Trigger an "Update" event with the following code:

$ (". Tablesorter"). Trigger ("Update");

The above problems really headache for a long time, just began to use the official online pager plugin, found that this is not appropriate.

and online search data collation the following code:

$ (". Tablesorter tbody tr"). AddClass ("delete");  $ (". Tablesorter tbody Tr.delete"). Remove ();  

It was all used, and the test found only $ (". Tablesorter"). Trigger ("Update"); This sentence will solve the problem.

The others don't know what it is.

Required Documents: http://download.csdn.net/detail/itmyhome/7389871

Style.css and pictures under the Themes\blue path.




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.