Как отсортировать таблицу из выпадающего списка

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 событие: 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; 
});