CODEWITHSUNDEEP
jqueryhtmlcsstablesorter
sami_ui
sami_ui

Reputation: 110

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.

Upvotes: 0

Views: 1071

Answers (1)

Mottie
Mottie

Reputation: 86433

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.

Upvotes: 0

Related Questions