1

それは請求リストです：

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

jQueryまたは純粋なJavaScriptを使用して価格で並べ替えたい。（サーバー側ではありません）

jQuery Tablesorterを試しましたが、失敗しました。一部の価格は数字ではないためです。（Free）

私に何ができる？Tablesorterはそれをサポートできますか？または、他のプラグインを使用する必要があります...

4

5 に答える 5

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)
    })
})

この例では、価格のあるセルにクラス「price」を追加する必要があります。または、疑似セレクター「：last-child」を使用できます。

于 2013-03-25T19:44:45.593 に答える
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 に答える
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

DataTables（http://www.datatables.net/）を使用できます。これは非常に強力なJSプラグインです。

于 2013-03-25T19:31:11.523 に答える
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 に答える