ドロップダウンリストからテーブルをソートする方法

Question

このために単純なソート関数を作成するにはどうすればよいですか？私はtablesorterのようなプラグインがあることを知っている。しかし、ドロップダウンリストからはソートされません。または、プラグインを変更して、ドロップダウンリストからソートできるようにすることもできます。前もって感謝します。

HTML：

<form action="#" method="post"> 
    <input type="text" id="UserID" name="UserID" readonly="readonly"> 
    <input type="text" id="UserName" name="UserName" placeholder="Name"> 
    <input type="text" id="UserOccupation" name="UserOccupation" placeholder="Occupation"> 
    <button type="button" name="button">Add</button><br> 
</form> 
Sort By: 
<select> 
    <option>ID</option> 
    <option>Name</option> 
    <option>Occupation</option> 
</select> 
<table id="table" class="tablesorter"> 
    <thead> 
    <tr > 
     <th>ID</th> 
     <th>Name</th> 
     <th>Occupation</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

Javascriptを：テーブルをソートする

$(document).ready(function() { 
    //Set id field to 1 
    var id = $('#UserID'); 
    id.val("1"); 

    //Add 1 to the id in textbox 
    function incID(){ 
    var str = id.val(); 
    var int = parseInt(str); 
    var idVal = int + 1; 
    id.val(idVal.toString()); 
    } 
    //When button clicked 
    $('button').on('click', function(){ 
    //create a new object 
    var obj = new Object(); 
    //pass value dynamically from input box 
    obj.id = $('#UserID').val(); 
    obj.name = $('#UserName').val(); 
    obj.occupation = $("#UserOccupation").val(); 
    //display data to the table 
    var addrow = "<tr><td>" + obj.id + "</td><td>" + obj.name + "</td><td>"+ obj.occupation +"</td></tr>"; 
    $("table tbody").append(addrow); 
    //Add 1 to id field 
    incID(); 
    }); 

}); 

Answer 1

を自分で行うには非常に簡単です、あなたがしなければならないだろう、すべてのJavaScriptのソートを使用してソート列でありますメソッド（http://www.w3schools.com/jsref/jsref_sort.asp）を削除し、テーブルに行を再追加します。

はあなたのようなさまざまなデータ型のソート方法を作成することができます。

function sortByNumber(rows, selector, ascending) { 
    rows.sort(function(a, b) { 
    var numberA = parseInt($(selector, a).text(), 10); 
    var numberB = parseInt($(selector, b).text(), 10); 

    if (ascending) 
     return numberA - numberB; 
    else 
     return numberB - numberA; 
    }); 

    return rows; 
} 

function sortByText(rows, selector, ascending) { 
    rows.sort(function(a, b) { 
    var textA = $(selector, a).text(); 
    var textB = $(selector, b).text(); 

    if (ascending) 
     return textA.localeCompare(textB); 
    else 
     return textB.localeCompare(textA); 
    }); 

    return rows; 
} 

（https://jsfiddle.net/kg000ta7/の実施例）

しかし、あなたがあなたのテーブルに行または列の多くを持って計画している場合、 tablesorterのようなプラグインはおそらくより良いパフォーマンスを発揮します。

文書によると、手動でソートtablesorter「sorton」イベントをトリガすることによりすることができます：

$('select').on('change', function() { 
    var sorting; 

    switch (field) { 
    case 'ID': 
     sorting = [[0,0]]; 
     break; 
    case 'Name': 
     sorting = [[1,0]]; 
     break; 
    case 'Occupation': 
     sorting = [[2,0]]; 
     break; 
    default: 
     console.error('Undefined sort field ' + field); 
     break; 
    } 

    $("table").trigger("sorton",[sorting]); 
    return false; 
});