我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
我有一个非常简单的HTML表,有4列:
Facility Name, Phone #, City, Specialty
我希望用户只能按设施名称和城市进行排序。
我如何使用jQuery编码这个?
当前回答
这一个不会挂起浏览器,容易配置进一步:
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表排序插件只对传递给浏览器的内容进行排序。在许多情况下,您必须记住表是动态的数据集,并且可能包含无数行数据。
你提到了你只有4列,但更重要的是,你没有提到我们在这里讨论的行数。
如果从数据库传递5000行到浏览器,知道实际的数据库表包含100,000行,我的问题是:使表可排序有什么意义?为了进行适当的排序,您必须将查询发送回数据库,并让数据库(实际上是为对数据进行排序而设计的工具)为您进行排序。
直接回答你的问题,我遇到过的最好的排序插件是Ingrid。我不喜欢这个附加组件的原因有很多(你称之为“不必要的铃铛和哨子……”),但它在排序方面最好的特性之一是它使用ajax,并且不假设在它进行排序之前已经将所有数据传递给它。
我意识到这个答案对于您的需求来说可能有些过分(并且晚了2年),但是当我所在领域的开发人员忽视这一点时,我确实很恼火。所以我希望有人能注意到。
我现在感觉好多了。
你可以使用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')
});
});
});
演奏小提琴的例子
我喜欢这个公认的答案,但是,很少有人要求对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,由接受的答案链接,作为一个外部资源。提醒一下!
根据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;
}
我的投票!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在所有时间…看它! 演示