jquery插件之tablesorter表格排序

前言

tablesorter是一个可以支持table排序用的插件,只需简单的引入tablesorter.js及其自带的主题样式或自定义的样式,即可支持表格的排序。我们可以很方便的控制在哪些列上加入排序功能,并且tablesorter也支持自定义排序规则,当然jquery插件使用的前提是必须引入jquery.js,并且要放在tablesorter.js引入之前,下面将简单的介绍tablesorter的使用。

具体使用

  1. 到官网下载资源包__jquery.tablesorter.zip
  2. 在html页面中引入jquery.js和tablesorter.js脚本文件

    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="tablesorter.js"></script>
  3. 必须含thead和tbody的table

    <table id="myTable" class="tablesorter"> 
    <thead>
    <tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
    </tr>
    <tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
    </tr>
    <tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
    </tr>
    <tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
  4. document加载的时候排序table

    $(document).ready(function(){ 
    $("#myTable").tablesorter();
    });
  5. 效果图

    image

参考链接

  1. http://tablesorter.com/docs/
  2. https://mottie.github.io/tablesorter/docs/
  3. https://mottie.github.io/tablesorter/docs/example-option-sort-list.html