zoukankan      html  css  js  c++  java
  • jquery tablesorter

    参考:http://tablesorter.com/docs/

    Getting started

    To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

    <script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

    tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

    <table id="myTable"> 
    <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> 
        

    Start by telling tablesorter to sort your table when the document is loaded:

    $(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    ); 
        

    Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

    $(document).ready(function() 
        { 
            $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
        } 
    ); 
        

    NOTE! tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see Examples

    Full release - Plugin, Documentation, Add-ons, Themes jquery.tablesorter.zip

  • 相关阅读:
    Spring中的AOP(五)——定义切入点和切入点指示符
    Java获取URL对应的资源
    最简单的视频网站(JavaEE+FFmpeg)
    Android 为应用添加数字角标
    ViewTreeObserver简介
    Android中pendingIntent的深入理解
    在Windows的CMD中如何设置支持UTF8编码?
    android中角标的实现
    ANDROID SHAPE画圆形背景_ANDROID实现角标布局
    Android 学习之 开源项目PullToRefresh的使用
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1606761.html
Copyright © 2011-2022 走看看