我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
当前回答
根据James的回答,我只改变排序函数,使其更通用。这样它将按字母顺序和数字进行排序。
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;
}
其他回答
这一个不会挂起浏览器,容易配置进一步:
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()
}
我喜欢这个公认的答案,但是,很少有人要求对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,由接受的答案链接,作为一个外部资源。提醒一下!
到目前为止,我使用过的最简单的方法是:http://datatables.net/
令人惊讶的是简单的……只是确保如果你走DOM替换路线(IE,建立一个表,让DataTables重新格式化它),然后确保用<thead>和<tbody>格式化你的表,否则它将不起作用。这是唯一的问题。
它还支持AJAX等。就像所有真正优秀的代码一样,关闭它也非常容易。不过,你会对你用的东西感到惊讶的。我从一个只对一个字段进行排序的“裸”DataTable开始,然后意识到一些特性确实与我正在做的事情相关。客户喜欢这些新功能。
加分到数据表的完整ThemeRoller支持....
我在tablesorter上也有不错的运气,但它远没有那么简单,没有那么好的文档,而且只有一般的功能。
这里有一个图表,可能有助于决定使用哪个:http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/
我偶然发现了这个,就想发表我的意见。单击列标题进行升序排序,再单击列标题进行降序排序。
适用于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解决方案。