我喜欢这个公认的答案，但是，很少有人要求对html进行排序，而且不需要添加图标来指示排序方向。我采取了接受答案的用法示例，并通过简单地添加bootstrap到我的项目来快速修复，并添加以下代码:

<div></div>

在每个<th>，这样你就有一个地方来设置图标。

setIcon(逆);

从公认答案的用法，在线下:

th。点击(函数(){

并通过添加setIcon方法:

function setIcon(element, inverse) {

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

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-up');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-down');
        }
        $(element).siblings().find('div').removeClass();
    }

这里是一个演示。-你需要在Firefox或IE中运行演示，或者禁用Chrome的mime类型检查来运行演示。它依赖于sortElements Plugin，由接受的答案链接，作为一个外部资源。提醒一下!

我们刚刚开始使用这个灵巧的工具: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插件(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')
    });
  });
});

演奏小提琴的例子

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

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

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

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

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

我现在感觉好多了。

我偶然发现了这个，就想发表我的意见。单击列标题进行升序排序，再单击列标题进行降序排序。

适用于Chrome, Firefox, Opera和IE(8) 只使用JQuery 阿尔法和数字排序是升序和降序吗

$('th').click(function(){ 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])} }) 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() } table, th, td { border: 1px solid black; } th { cursor: pointer; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><th>Country</th><th>Date</th><th>Size</th></tr> <tr><td>France</td><td>2001-01-01</td><td>25</td></tr> <tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr> <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr> <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr> <tr><td>USA</td><td></td><td>-6</td></tr> </table>

**更新:2018年

对于那些感兴趣的人，我在这里提供了一个ES6纯Javascript解决方案。

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