Avoid/disable some specific rows from sorting process using jQuery tablesorter.js

sanjulika picture sanjulika · Jan 9, 2013 · Viewed 16.2k times · Source

I have one table which I am sorting using jquery plugin tablesorter. Here i want to avoid first row {class="avoid-sort" } to be sort when any column is selected for sorting. example:


       <thead>
        <tr>
            <th class="header">#</th>
            <th class="header">Purchase Date</th>
            <th class="header">Course Name</th>
            <th class="header">Amount(in $)</th>
            <th class="header">User Name</th>
            <th class="header">Share</th>
            <th class="header">Net Revenue [$236.41]</th>
        </tr>
      </thead>
  <tbody>

       <tr class="avoid-sort">
            <th colspan="7">Total Revenue</th>
            <td>236.41</td>
        </tr>

        <tr>
                <td>1</td>
                <td>January 3rd, 2013</td>
                <td>Tackle Certification</td>
                <td>50</td>
                <td>Khushi Jha</td>
                <td>35</td>
                <td>33.69</td>
        </tr>
      <tr>
                <td>2</td>
                <td>January 3rd, 2013</td>
                <td>Flag Certification</td>
                <td>100</td> 
                <td>Pay</td>
                <td>70</td>
                 <td>67.67</td>
      </tr>
                            <tr>
                <td>3</td>
                <td>January 3rd, 2013</td>
                <td>Tackle Certification</td>
                <td>50</td>
                <!--                    <td>-->
                    <!--</td>-->
                <td>Pay</td>
                <td>35</td>
                 <td>33.69</td>

   </tr>


tr class="avoid-sort" should not come in sorting!

Please help!!

Answer

Mottie picture Mottie · Jan 10, 2013

You have two choices:

  1. If you are using the original tablesorter, you can get this static row widget to "lock" the row in place.

  2. If you are using my fork of tablesorter, you can just add a non-sortable tbody, like this (demo):

    <table>
    <thead>
      ...
    </thead>
    
    <!-- rows within this tbody are ignored -->
    <tbody class="avoid-sort">
      <tr>
        <th colspan="7">Total Revenue</th>
        <td>236.41</td>
      </tr>
    </tbody>
    
    <tbody>
      <!-- sortable rows -->
      <tr>
        ...
      </tr>
    </tbody>
    </table>
    

    then initialize the table like this:

    $(function() { 
    
      $("table").tablesorter({ 
        theme : 'blue', 
        cssInfoBlock : "avoid-sort", 
        widgets: [ 'zebra' ] 
      }); 
    
    });