jQuery：实现简单table 排序, table sort

使用jquery.sortElements

方法：

引入库：

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>

HTML:

<table>
    <tr>
        <th id="facility_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>
    <tr>
        <td>JJJ</td>
        <td>55544444</td>
        <td>London</td>
        <td>MMM</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>33332222</td>
        <td>Paris</td>
        <td>RRR</td>
    </tr>
</table>

CSS:

td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }

JAVASCRIPT:

    var table = $('table');
    
    $('#facility_header, #city_header')
        .wrapInner('<span title="sort this column"/>')
        .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(){
                    
                    // parentNode is the element we want to move
                    return this.parentNode; 
                    
                });
                
                inverse = !inverse;
                    
            });
                
        });

以上 js 不能很好的判断文字和数字混合的排序，以下是改进版：

// sort table header, need sortElements (jQuery.fn.sortElements) dependency
var $sorted_header = $('.sorted_header'),
    $no_sorted_class = '.sorted_header, .no_sorted_header';

if($sorted_header.size())
{
    $sorted_header
        .wrapInner('<span title="sort this column"/>')
        .each(function(){
            var th = $(this), thIndex = th.index(), inverse = false;
            th.click(function(){
                $(this).closest('table').find('td:not('+$no_sorted_class+')').filter(function(){ return $(this).index() === thIndex; })
                    .sortElements(
                        function(a, b){
                            var $a = $.text([a]), $b = $.text([b]);
                            if($a.indexOf('/')>0) $a = $.trim($a.split('/')[0]);
                            if($b.indexOf('/')>0) $b = $.trim($b.split('/')[0]);
                            if($.isNumeric($a) && $.isNumeric($b)) { $a = parseFloat($a); $b = parseFloat($b); }
                            return $a > $b ? inverse ? -1 : 1 : inverse ? 1 : -1;
                        },
                        function(){ return this.parentNode; } // parentNode is the element we want to move
                    );
                inverse = !inverse;
            });
        });
}

如果希望有更多分隔符，可以参考：

1. split regex question

data.split(/[.,\/ -]/)

2. indexOf regular expressions

String.prototype.regexIndexOf = function(regex, startpos) {
    var indexOf = this.substring(startpos || 0).search(regex);
    return (indexOf >= 0) ? (indexOf + (startpos || 0)) : indexOf;
}

String.prototype.regexLastIndexOf = function(regex, startpos) {
    regex = (regex.global) ? regex : new RegExp(regex.source, "g" + (regex.ignoreCase ? "i" : "") + (regex.multiLine ? "m" : ""));
    if(typeof (startpos) == "undefined") {
        startpos = this.length;
    } else if(startpos < 0) {
        startpos = 0;
    }
    var stringToWorkWith = this.substring(0, startpos + 1);
    var lastIndexOf = -1;
    var nextStop = 0;
    while((result = regex.exec(stringToWorkWith)) != null) {
        lastIndexOf = result.index;
        regex.lastIndex = ++nextStop;
    }
    return lastIndexOf;
}

本文：jQuery：实现简单table 排序