0

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.

sami_ui
  • 110
  • 1
  • 3
  • 13

1 Answers1

0

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.

Mottie
  • 84,355
  • 30
  • 126
  • 241
  • Thanks a ton Mottie!! :) It works! Well if i get any other query, will again bug you. Never mind please !! :) – sami_ui May 04 '13 at 19:18
  • If this answer solves your problem, please click on the check mark to accept it as an answer :) – Mottie May 04 '13 at 19:19
  • Hi Mottie. I am trying to make sorting happen by triggering click on header in one table when header in other table is clicked. But, am not able to. Kindly please help me out with it. Here is the code i changed http://jsbin.com/igijer/10/edit – sami_ui May 06 '13 at 17:42
  • Instead of triggering a `click` on the header, trigger a `sort` ([ref](http://mottie.github.io/tablesorter/docs/#sort)) - [updated demo](http://jsbin.com/igijer/13/edit) – Mottie May 06 '13 at 18:39
  • Thank you Mottie! You rock!! :) – sami_ui May 06 '13 at 19:06
  • Hello Mottie, can u see this if u cud help it out! http://stackoverflow.com/questions/16496709/stopping-a-blur-event-on-click-of-a-hyperlink – sami_ui May 12 '13 at 07:11