zoukankan      html  css  js  c++  java
  • jQuery排序插件tableSorter

    Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。

    主要的特点包括:

    • 多列排序
    • 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序
    • 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性
    • 支持第二个隐藏域排序
    • 可扩展外观
    • 程序简小,打包后只有 7.4K

    效果:

    用法:

    1.先引两个js

    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.tablesorter.min.js"></script>

    注意:表格要用thead/th和tbody。如:
    <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> 
    </tbody>
    <table>

    3.调用排序js代码

    <script type="text/javascript">
    $(document).ready(function() {
       $("#mytable").tablesorter();
    });
    </script>

    再回到页面点击第一行就可以进行排序了.

     

    ps:

      1.一定要引jQuery包,所有jq插件都是基于jQuery包的

      2.如果想指定哪一栏不排序这样写

        $("#mytable").tablesorter({headers:{5:{sorter:false}}});

        第5列的sorter为false就OK了

    /**
     Start by telling tablesorter to sort your table when the document is loaded:
    */
    $(document).ready(function(){
     $("#myTable").tablesorter();
    }); 
    /**
     排序列表  [0,0][1,0] 按第一列,第二列进行升序排序  [列索引,排序方向] 0 asc 1 desc 
     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]]} );
    }); 
    /**
     排序选项设置
    */
    $(document).ready(function(){
     $("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']});
    });
    /*
    var myTextExtraction = function(node){
     // extract data from markup and return it      
     return node.childNodes[0].childNodes[0].innerHTML; 
    } 
    $(document).ready(function(){
     $("#myTable").tableSorter({textExtraction: myTextExtraction});
    });
    */
    
    /**
     禁止第二列.每三列进行排序
    **/
    $(document).ready(function(){
     $("myTable").tablesorter({
      // pass the headers argument and assing a object 
      headers: {
       // assign the secound column (we start counting zero)
       1: {
       // disable it by setting the property sorter to false
       sorter: false},
       // assign the third column (we start counting zero)
       2: {
       // disable it by setting the property sorter to false
       sorter: false}
      }
     });
    });
    
    /**
     使用TH更像一个按钮
    $(document).ready(function(){
     $("#myTable").tableSorter(
      {cancelSelection:true}
     );
    });
    */
    
    /**
     强制某列排序后不能动,其它列根据该列进行排序
     Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
    */
    $(document).ready(function(){
     // call the tablesorter plugin/
     $("myTable").tablesorter({
      // set forced sort on the fourth column and i decending order. 
      sortForce: [[0,0]]}
     );
    }); 
    
    /**
     按键的更换
    */
    $(document).ready(function(){
     // call the tablesorter plugin
     $("table").tablesorter({
      // change the multi sort key from the default shift to alt button
      sortMultiSortKey: 'altKey'
     });
    }); 
    
    /**
    $(document).ready(function(){
     $("table").tablesorter();
     $("#ajax-append").click(function() {
      $.get("assets/ajax-content.html",function(html) {
       // append the "ajax'd" data to the table body
       $("table tbody").append(html);
       // let the plugin know that we made a update
       $("table").trigger("update");
       // set sorting column and direction, this will sort on the first and third column
       var sorting = [[2,1],[0,0]];
       // sort on the first column 
       $("table").trigger("sorton",[sorting]);
      });
      return false;
     }); 
    });
    **/
    
    $(document).ready(function(){
     $("myTable").tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorterPager({container: $("#pager")});
    });
    
    
  • 相关阅读:
    前端开发面试题总结之——HTML
    HashMap的那些事
    抽象同步队列AQS(中)—— AQS的重点方法解析
    抽象同步队列AQS(上)—— 宏观上理解AQS
    synchronized原理详解
    volatile原理详解
    JMM模型详解
    计算机运行时内存&处理器CPU初步认知
    mysql-索引详解
    mysql-事务隔离机制&mvcc原理
  • 原文地址:https://www.cnblogs.com/ishibin/p/2209950.html
Copyright © 2011-2022 走看看