Question

这是结算清单：

Service   Price
---------------
S1        13 CHF
S2        Free
S3        Free
S4        40 CHF

我想使用jQuery或纯JavaScript按价格对其进行排序。（不是服务器端）

我尝试了jQuery Tablesorter，但失败了。因为有些价格不是数字。（Free）

我该怎么办？ Tablesorter可以支持吗？或者我应该使用其他插件......

Answer 1

如果您不想使用重型插件，则无法手动对其进行排序：

$(function(){
    var table=$('#table');
    var rowsArray=$('tr',table).sort(function(current,next){
        var compareCurrent=$('td.price',current).text().toUpperCase();
        var compareNext=$('td.price',next).text().toUpperCase();
        return (compareCurrent<compareNext)? -1 : (compareCurrent > compareNext) ? 1 : 0;
    });
    $('tr',table).remove();
    $.each(rowsArray,function(index,element){
        $(element).appendTo(table)
    })
})

在此示例中，您应该为具有价格的单元格添加“价格”类。或者你可以使用伪选择器“：last-child”。

Answer 2

以下是一些自定义排序代码，可以为您提供以下内容：

您的表格的ID为items
您想要排序的每一行（tr）都有类item
每个价格单元格（td）都有类price

然后只需包含以下jQuery代码并在要排序时调用该函数：（Here is a demo）

var sorted_by_price = false;

function sortByPrice() {
    $('#items').append(
        $('#items').find('tr.item').sort(function (a, b) {
            var td_a = $($(a).find('td.price')[0]);
            var td_b = $($(b).find('td.price')[0]);
            if(sorted_by_price){
                if(td_a.html() == 'Free') return 1;
                return td_b.html().replace(/\D/g, '') - td_a.html().replace(/\D/g, '');
            }else{
                if(td_a.html() == 'Free') return -1;
                return td_a.html().replace(/\D/g, '') - td_b.html().replace(/\D/g, '');
            }
        })
    );
    if(sorted_by_price) sorted_by_price = false;
    else sorted_by_price = true;
}

Answer 3

您可以编写自己的解析器。请参阅以下文档：http://tablesorter.com/docs/example-parsers.html

工作示例：

$.tablesorter.addParser({ 
    id: 'price', 
    is: function(s) { 
        return false; 
    }, 
    format: function(s) { 
        return s.replace(/Free/,0).replace(/ CHF/,""); 
    }, 
    type: 'numeric' 
}); 

$(function() { 
    $("table").tablesorter({ 
        headers: { 
            1: { 
                sorter:'price' 
            } 
        } 
    }); 
});

http://jsfiddle.net/8BCHR/

Answer 4

您可以使用DataTables（http://www.datatables.net/）。它是非常强大的JS插件。

Answer 5

因为您要自定义非数字值进行排序，所以需要某种自定义排序功能。这是您的表的这种自定义排序例程：

HTML：

<table id="service">
    <tr><td class="sortBy" data-sortType="findNumber">Service</td><td class="sortBy" data-sortType="numeric">Price</td></tr>
    <tr><td>S1</td><td>13 CHF</td></tr>
    <tr><td>S2</td><td>Free</td></tr>
    <tr><td>S3</td><td>Free</td></tr>
    <tr><td>S4</td><td>40 CHF</td></tr>
</table>

代码：

$(".sortBy").click(function() {
    var self = $(this);
    var tbody = self.closest("tbody");

    // determine which column was clicked on
    var column = self.index();

    // get the sort type for this column
    var sortType = self.data("sortType");
    var sortCells = [];

    // get all rows other than the clicked on row
    //    find the right column in that row and
    //    get the sort key from it
    $(this).closest("tr").siblings().each(function() {
        var item = $(this).find("td").eq(column);
        var val = item.text();
        var matches;
        if (sortType == "numeric") {
            if (val.toLowerCase() == "free") {
                val = 0;
            } else {
                val = parseInt(val, 10);
            }
        } else {
            // find numbers in the cell
            matches = val.match(/\d+/);
            if (matches) {
                val = parseInt(matches[0], 10);
            } else {
                val = 0;
            }
        }
        sortCells.push({cell: item, data: val});
    });
    // sort by the key
    sortCells.sort(function(a, b) {
        return(a.data - b.data);
    });
    // reinsert into the table in sorted order
    for (var i = 0; i < sortCells.length; i++) {
        sortCells[i].cell.parent().appendTo(tbody);
    }
});

工作演示：http://jsfiddle.net/jfriend00/3w9gQ/

按价格列排序表

5 个答案: