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

  • 相关阅读:
    Springboot日志初探
    Slf4j初探
    Log4j日志初探
    Nacos集群初探
    python初学者必看学习路线图!!!
    ubuntu无法设置为中文怎么办?(适用于ubuntu14.04/16.04)
    PythonGUI编程(Tkinter)-基本概念以及核心开发步骤
    Python学生信息管理系统(注释最详细,小白都看的懂)
    Python面向对象分析存放家具
    面向对象分析烤地瓜项目
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1606761.html
Copyright © 2011-2022 走看看