我有一个非常简单的HTML表,有4列:

Facility Name, Phone #, City, Specialty

我希望用户只能按设施名称和城市进行排序。

我如何使用jQuery编码这个?


当前回答

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

其他回答

到目前为止,我使用过的最简单的方法是:http://datatables.net/

令人惊讶的是简单的……只是确保如果你走DOM替换路线(IE,建立一个表,让DataTables重新格式化它),然后确保用<thead>和<tbody>格式化你的表,否则它将不起作用。这是唯一的问题。

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

加分到数据表的完整ThemeRoller支持....

我在tablesorter上也有不错的运气,但它远没有那么简单,没有那么好的文档,而且只有一般的功能。

这一个不会挂起浏览器,容易配置进一步:

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年),但是当我所在领域的开发人员忽视这一点时,我确实很恼火。所以我希望有人能注意到。

我现在感觉好多了。

根据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;
}

如果你想避免所有的铃铛和口哨,那么我可以建议这个简单的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;

        });

    });

还有一个演示。(点击“城市”和“设施”列标题进行排序)