这里有一个图表，可能有助于决定使用哪个:http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

我们刚刚开始使用这个灵巧的工具: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>

我的投票!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在所有时间…看它! 演示

你可以使用jQuery插件(breedjs)提供排序，过滤和分页:

HTML:

<table>
  <thead>
    <tr>
      <th sort='name'>Name</th>
      <th>Phone</th>
      <th sort='city'>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td>{{person.phone}}</td>
      <td b-sort="city">{{person.city}}</td>
      <td>{{person.speciality}}</td>
    </tr>
  </tbody>
</table>

JS:

$(function(){
  var data = {
    people: [
      {name: 'c', phone: 123, city: 'b', speciality: 'a'},
      {name: 'b', phone: 345, city: 'a', speciality: 'c'},
      {name: 'a', phone: 234, city: 'c', speciality: 'b'},
    ]
  };
  breed.run({
    scope: 'people',
    input: data
  });
  $("th[sort]").click(function(){
    breed.sort({
      scope: 'people',
      selector: $(this).attr('sort')
    });
  });
});

演奏小提琴的例子

@Nick Grealy的回答很好，但它没有考虑到表头单元格可能的行跨度属性(可能其他答案也没有这样做)。下面是对@Nick Grealy的回答的改进，解决了这个问题。也是基于这个答案(谢谢@Andrew Orlov)。

我也替换了$。isNumeric函数带有自定义的函数(感谢@zad)，以使其适用于较旧的jQuery版本。

要激活它，在<table>标记中添加class="sortable"。

$(document).ready(function() {

    $('table.sortable th').click(function(){
        var table = $(this).parents('table').eq(0);
        var column_index = get_column_index(this);
        var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse()};
        for (var i = 0; i < rows.length; i++){table.append(rows[i])};
    })

});

function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_column_index(element) {
    var clickedEl = $(element);
    var myCol = clickedEl.closest("th").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("th[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    // alert('Row: ' + myRow + ', Column: ' + myCol);
    return myCol;
};

这是一个排序表的好方法:

$(document).ready(function () { $('th').each(function (col) { $(this).hover( function () { $(this).addClass('focus'); }, function () { $(this).removeClass('focus'); } ); $(this).click(function () { if ($(this).is('.asc')) { $(this).removeClass('asc'); $(this).addClass('desc selected'); sortOrder = -1; } else { $(this).addClass('asc selected'); $(this).removeClass('desc'); sortOrder = 1; } $(this).siblings().removeClass('asc selected'); $(this).siblings().removeClass('desc selected'); var arrData = $('table').find('tbody >tr:has(td)').get(); arrData.sort(function (a, b) { var val1 = $(a).children('td').eq(col).text().toUpperCase(); var val2 = $(b).children('td').eq(col).text().toUpperCase(); if ($.isNumeric(val1) && $.isNumeric(val2)) return sortOrder == 1 ? val1 - val2 : val2 - val1; else return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0; }); $.each(arrData, function (index, row) { $('tbody').append(row); }); }); }); }); table, th, td { border: 1px solid black; } th { cursor: pointer; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr><th>id</th><th>name</th><th>age</th></tr> <tr><td>1</td><td>Julian</td><td>31</td></tr> <tr><td>2</td><td>Bert</td><td>12</td></tr> <tr><td>3</td><td>Xavier</td><td>25</td></tr> <tr><td>4</td><td>Mindy</td><td>32</td></tr> <tr><td>5</td><td>David</td><td>40</td></tr> </table>

提琴可以在这里找到: https://jsfiddle.net/e3s84Luw/

解释如下: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code