js實現table排序（jQuery下的jquery.sortElements）

標籤：stack   this   問題   網上   git   script   post   datatable   html   

項目中要實現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

js實現table排序（jQuery下的jquery.sortElements）