zoukankan      html  css  js  c++  java
  • js实现table排序(jQuery下的jquery.sortElements)

    项目中要实现table排序的功能。

    网上有非常多解决方式,非常多都基于jQuery。

    • jquery.tablesorter。大小17KB。只是他的首页在ie10下兼容性有点问题。
    • DataTables,大小75KB。功能强大,带分页,搜索等功能。

    • 还有插件叫sortElements,非常小巧。仅仅有3KB。兼容性也不错。并且在Github上有818个星。

    最后我选择用sortElements,实现非常easy:

    1. 引入jQuery

    <script type="text/javascript" src="jquery.js"></script>  

    2. 引入sortElements.js

    <script type="text/javascript" src="jquery.sortElements.js"></script>  

    3. js 代码

        
    $(document).ready(function(){  
           var table = $('#mytable');//table的id
           $('#sort_header')//要排序的headerid
            .each(function(){
                var th = $(this),
                    thIndex = th.index(),
                    inverse = false;
                
                th.click(function(){
                    table.find('td').filter(function(){
                        return $(this).index() === thIndex;
                    }).sortElements(function(a, b){
                        return $.text([a]) > $.text([b]) ?

    inverse ? -1 : 1 : inverse ?

    1 : -1; }, function(){ return this.parentNode; }); inverse = !inverse; }); }); });


    4. html代码

    <table id="mytable">
        <tr>
            <th id="sort_header">Facility name</th>
            <th>Phone #</th>
            <th id="city_header">City</th>
            <th>Speciality</th>
        </tr>
        <tr>
            <td>CCC</td>
            <td>00001111</td>
            <td>Amsterdam</td>
            <td>GGG</td>
        </tr>
    ...
    </table>


    实现效果:www.bishouyi.cn

    (由padolsey开发,github地址为https://github.com/padolsey/jquery.fn/tree/master/sortElements)

    參考:http://stackoverflow.com/questions/3160277/jquery-table-sort


  • 相关阅读:
    第三次作业
    第二次作业
    第一次作业
    实验二
    第一次试验
    第五次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/7043655.html
Copyright © 2011-2022 走看看