jQuery表排序

我有一个非常简单的4列的HTML表格：

Facility Name, Phone #, City, Specialty 

我希望用户能够通过设施名称和城市进行排序。

我怎样才能使用jQuery进行编码？

Answer 1

如果你想避免所有的花里胡哨的话，我可以建议这个简单的sortElements插件 。 用法：

 var table = $('table'); $('.sortable th') .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){ if( $.text([a]) == $.text([b]) ) return 0; 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; }); }); 

和一个演示。 （点击“城市”和“设施”列标题进行排序）

Answer 2

我遇到了这个，并认为我会扔我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.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>spain</td> <td>2005-05-05</td> <td></td> </tr> <tr> <td>Lebanon</td> <td>2002-02-02</td> <td>-17</td> </tr> <tr> <td><a href=#>Argentina</a></td> <td>2005-04-04</td> <td>100</td> </tr> <tr> <td>USA</td> <td></td> <td>-6</td> </tr> </table> 

Answer 3

到目前为止，我使用的最简单的是： http : //datatables.net/

令人惊讶的简单…只要确定如果你去的DOM替换路线（IE，建立一个表，让DataTables重新格式化），然后确保格式与<thead>和<tbody>表，否则将无法正常工作。 这是唯一的问题。

还有对AJAX的支持等等。就像所有的代码一样，这也是非常容易的。 不过，你会惊讶于你可能会用到的东西。 我从一个“光秃秃的”DataTable开始，它只对一个字段进行排序，然后意识到某些功能与我正在做的事情真正相关。 客户喜欢新功能。

奖金指向完整的ThemeRoller支持的DataTables ….

我已经用tablesorter好运了，但它不是那么容易，没有很好的文档，只有好的功能。

Answer 4

我们刚开始使用这个漂亮的工具： http ： //tablesorter.com/docs/

有一个视频在它的使用： 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> 

Answer 5

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

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

如果您从数据库传递5000行到浏览器，知道实际的数据库表包含100,000行，我的问题是：表中有什么意义可以排序？ 为了做一个适当的排序，你必须把查询发送回数据库，并让数据库（一个实际设计用于排序数据的工具）为你排序。

直接回答你的问题，我遇到的最好的排序附加是英格丽。 有很多原因，我不喜欢这个插件（你称之为“不必要的铃声和口哨声”），但是它的一个最好的特点就是使用ajax，假设你已经把它所有的数据都传给了它。

我承认，这个答案可能是过度的（迟了2年），但是当我的领域的开发人员忽略了这一点时，我感到非常恼火。 所以我希望别人能接受。

我现在感觉好多了。

Answer 6

下面的图表可能有助于决定使用哪个图表： http : //blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

Answer 7

我喜欢这个接受的答案，但是，很少有你需要排序HTML，而不必添加图标指示排序方向。 我接受了答案的使用示例，并通过简单地将bootstrap添加到我的项目并添加下面的代码来快速解决这个问题：

<div></div>

在每个<th>里面，这样你就可以设置图标了。

setIcon(this, inverse);

从接受的答案的用法，下面的行：

th.click(function () {

并通过添加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插件作为外部资源。 只是一个头！

Answer 8

您可以使用提供排序，过滤和分页的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') }); }); }); 

在小提琴上工作的例子

Answer 9

对于詹姆斯的回应，我只会改变排序功能，使其更具普遍性。 这样它会按字母排序文字和数字。

 if( $.text([a]) == $.text([b]) ) return 0; if(isNaN($.text([a])) && isNaN($.text([b]))){ return $.text([a]) > $.text([b]) ? inverse ? -1 : 1 : inverse ? 1 : -1; } else{ return parseInt($.text([a])) > parseInt($.text([b])) ? inverse ? -1 : 1 : inverse ? 1 : -1; } 

Answer 10

@Nick Grealy的答案很好，但是它没有考虑表头部分单元格的可能行rowspan属性（可能其他答案也不这么做）。 @Nick Grealy的答案是对这个问题的改进。 也基于这个答案 （谢谢@Andrew Orlov）。

我还用一个自定义的函数替换了$.isNumeric函数（谢谢@zad），以使它可以用于较老的jQuery版本。

要激活它，请将class="sortable"添加到<table>标记。

 $(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; }; 

Answer 11

我的投票！ jquery.sortElements.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做código
一个鳕鱼更好！ 在所有时间内所有表中的函数…看看它！
DEMO