如何從下拉列表中排序表

Question

如何爲此創建簡單的排序功能。我知道有像插圖一樣的插件。但它不會從下拉列表中排序。或者是插件可以修改，以便它可以從下拉列表中排序。先謝謝你。

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」事件：http://tablesorter.com/docs/example-trigger-sort.html

$('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; 
});