Sorting specific rows in a table + HTML + jQuery

问题

I have an requirement to sort only specific rows in a table. Am using tablesorter plugin to do sorting (http://mottie.github.io/tablesorter/js/jquery.tablesorter.js)

The example i have coded here in jsbin.

http://jsbin.com/igijer/1/edit

Here as and when a user selects a checkbox, the corresponding row is prepended to the top of the table. And when the selected checkbox is unchecked, the corresponding row is appended to the table.

Now, the unselected rows are not sorted. My requirement is that whenever the checkbox is unselected and the row gets appended to the table, the unselected rows alone must be sorted alphabetically.

回答1:

This should work for you (demo):

<table id="ex" class="tablesorter">
  <thead>
    <th class="sorter-false"></th>
    <th>Name</th>
    <th>Contribution</th>
  </thead>
  <!-- add an "info" only (non-sorting) tbody -->
  <tbody class="tablesorter-infoOnly"></tbody>

  <tbody class="names">
    <tr>
      <td><input type="checkbox" /></td>
      <td>Warren Buffet</td>
      <td>business</td>
    </tr>
    <!-- etc -->
  </tbody>
</table>

Code

$(function() {

  $("#ex").tablesorter({ sortList: [[0,0], [1,0]] });

  $('#ex').on('click', 'input:checkbox', function() {
    var $this = $(this);
    if ($this.is(':checked')) {
      $this.closest('tr').prependTo("#ex .tablesorter-infoOnly");
    } else {
      $this.closest('tr').appendTo("#ex .names");
    }
    $this.trigger('update');
  });
});

The actual position (appending) of the unchecked row in the "names" tbody doesn't matter because it will be added back and the current sort would be updated.

来源：https://stackoverflow.com/questions/16365368/sorting-specific-rows-in-a-table-html-jquery

标签

jquery

html

css

tablesorter