如何从下拉列表中对表格进行排序

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 这样的插件可能会执行得更好。

根据文档，您可以通过触发 '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; 
});