我们刚刚开始使用这个灵巧的工具:https://plugins.jquery.com/tablesorter/

有一个关于它的使用的视频: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

    $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

用一个简单的表格

<table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

另一种对HTML表进行排序的方法。(基于W3.JS HTML Sort)

/* Facility Name */ $('#bioTable th:eq(0)').addClass("control-label pointer"); /* Phone # */ $('#bioTable th:eq(1)').addClass("not-allowed"); /* City */ $('#bioTable th:eq(2)').addClass("control-label pointer"); /* Specialty */ $('#bioTable th:eq(3)').addClass("not-allowed"); var collection = [{ "FacilityName": "MinION", "Phone": "999-8888", "City": "France", "Specialty": "Genetic Prediction" }, { "FacilityName": "GridION X5", "Phone": "999-8812", "City": "Singapore", "Specialty": "DNA Assembly" }, { "FacilityName": "PromethION", "Phone": "929-8888", "City": "San Francisco", "Specialty": "DNA Testing" }, { "FacilityName": "iSeq 100 System", "Phone": "999-8008", "City": "Christchurch", "Specialty": "gDNA-mRNA sequencing" }] $tbody = $("#bioTable").append('<tbody></tbody>'); for (var i = 0; i < collection.length; i++) { $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>'); } .control-label:after { content: "*"; color: red; } .pointer { cursor: pointer; } .not-allowed { cursor: not-allowed; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.w3schools.com/lib/w3.js"></script> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <p>Click the <strong>table headers</strong> to sort the table accordingly:</p> <table id="bioTable" class="w3-table-all"> <thead> <tr> <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th> <th>Phone #</th> <th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th> <th>Specialty</th> </tr> </thead> </table>

我最终使用了尼克的答案(最受欢迎但不被接受)https://stackoverflow.com/a/19947532/5271220

并将其与https://stackoverflow.com/a/16819442/5271220结合起来，但不想在项目中添加图标或fontawesome。对于sort-column-asc/desc的CSS样式，我设置了颜色、填充、圆角边框。

我还修改了它，按类而不是按任何，这样我们就可以控制哪些是可排序的。如果以后有两个表，这也可以派上用场，尽管需要为此做更多的修改。

身体:

 html += "<thead>\n";
    html += "<th></th>\n";
    html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
    html += "<th class=\"sort-header\">Status <span></span></th>\n";
    html += "<th class=\"sort-header\">Comments <span></span></th>\n";
    html += "<th class=\"sort-header\">Location <span></span></th>\n";
    html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
    html += "</thead>\n";
    html += "<tbody>\n"; ...

．.． 再往下看

$("body").on("click", ".sort-header", function (e) {
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc) { rows = rows.reverse() }
    for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }

    setIcon(e.target, this.asc);
});

功能:

function comparer(index) {
        return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }

    function getCellValue(row, index) {
        return $(row).children('td').eq(index).text()
    }

    function setIcon(element, inverse) {

        var iconSpan = $(element).find('span');

        if (inverse == true) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-asc');
            $(iconSpan)[0].innerHTML = " &#8593 " // arrow up
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-desc');
            $(iconSpan)[0].innerHTML = " &#8595 " // arrow down 
        }

        $(element).siblings().find('span').each(function (i, obj) {
            $(obj).removeClass();
            obj.innerHTML = "";
        });
    }

我的回答是“小心”。很多jQuery表排序插件只对传递给浏览器的内容进行排序。在许多情况下，您必须记住表是动态的数据集，并且可能包含无数行数据。

你提到了你只有4列，但更重要的是，你没有提到我们在这里讨论的行数。

如果从数据库传递5000行到浏览器，知道实际的数据库表包含100,000行，我的问题是:使表可排序有什么意义?为了进行适当的排序，您必须将查询发送回数据库，并让数据库(实际上是为对数据进行排序而设计的工具)为您进行排序。

直接回答你的问题，我遇到过的最好的排序插件是Ingrid。我不喜欢这个附加组件的原因有很多(你称之为“不必要的铃铛和哨子……”)，但它在排序方面最好的特性之一是它使用ajax，并且不假设在它进行排序之前已经将所有数据传递给它。

我意识到这个答案对于您的需求来说可能有些过分(并且晚了2年)，但是当我所在领域的开发人员忽视这一点时，我确实很恼火。所以我希望有人能注意到。

我现在感觉好多了。

这一个不会挂起浏览器，容易配置进一步:

var table = $('table');

$('th.sortable').click(function(){
    var table = $(this).parents('table').eq(0);
    var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
    this.asc = !this.asc;
    if (!this.asc)
       ths = ths.reverse();
    for (var i = 0; i < ths.length; i++)
       table.append(ths[i]);
});

function compare(idx) {
    return function(a, b) {
       var A = tableCell(a, idx), B = tableCell(b, idx)
       return $.isNumeric(A) && $.isNumeric(B) ? 
          A - B : A.toString().localeCompare(B)
    }
}

function tableCell(tr, index){ 
    return $(tr).children('td').eq(index).text() 
}

我的投票!jquery. sortelelements .js和简单的jquery 非常简单，非常简单，谢谢nandhp…

            $('th').live('click', function(){

            var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();

                switch($(this).attr('inverse')){
                case 'false': inverse = true; break;
                case 'true:': inverse = false; break;
                default: inverse = false; break;
                }
            th.attr('inverse',inverse)

            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;     
            });

Dei uma melhorada do código 一条鳕鱼更好! 函数为所有表在所有Th在所有时间…看它! 演示