1

这是账单清单：

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

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

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

我能做些什么？Tablesorter 可以支持吗？或者我应该使用其他插件...

4

5 回答 5

1

以下是一些自定义排序代码，假设如下：

  1. 您的表的 id 为items
  2. tr您要排序的每一行 ( ) 都有类item
  3. 每个价格单元 ( td) 都有类price

然后只需包含以下 jQuery 代码并在您想要排序时调用该函数：（这是一个演示）

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;
}
于 2013-03-25T20:02:17.937 回答
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”。

于 2013-03-25T19:44:45.593 回答
0

您可以使用 DataTables ( http://www.datatables.net/ )。这是一个非常强大的 JS 插件。

于 2013-03-25T19:31:11.523 回答
0

您可以编写自己的解析器。请参阅以下文档：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/

于 2013-03-25T19:26:10.500 回答
0

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

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/

于 2013-03-25T19:38:42.653 回答