How to disable sorting on column in jQuery.tablesorter?

Question

I try to find a way how to disable sorting on column. I use jQuery plugin tablesorter. And by default if you click on header cell it sort column data, but what I need to do if I don't need to use sorting on one or two column in four columns table.

Thanks in advance.

Touchline

Answer 1

You must pass the appropriate parameters at initialization, for example:

{ ...
   headers: { 0: { sorter: false} }
}

For more information, check the manual at:

http://tablesorter.com/docs/

Savitt

best way, don't go with overwriting classes and stuff. It's cleaner. If you want to keep the arrows try to re-use the css from the lib – Burgoo

This is only a partial answer. It disables sorting but not tablesorter for this column, it continues to wrap our content in their sh*** box. Since this plugin is removing DOM element, i cant bind events on it. – Indemnification

Answer 2

Also you can use html data attribute:

<th data-sorter="false">...</th>

Or you can use a class:

<th class="sorter-false">...</th>

Woolery

Answer 3

Something like:

$('#selector').tablesorter({headers: {0: { sorter: false}}});

This is clearly outlined here: http://tablesorter.com/docs/example-options-headers.html

$(document).ready(function() { 
    $("#myTable").tablesorter({ 
        // pass the headers argument and assing a object 
        headers: { 
            // assign the secound column (we start counting zero) 
            1: { 
                // disable it by setting the property sorter to false 
                sorter: false 
            }, 
            // assign the third column (we start counting zero) 
            2: { 
                // disable it by setting the property sorter to false 
                sorter: false 
            } 
        } 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">             
    <thead>> 
        <tr> 
            <th>first name</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>date</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>peter</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>$9.99</td> 
            <td>20%</td> 
            <td>jul 6, 2006 8:14 am</td> 
        </tr> 
        <tr> 
            <td>john</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>$19.99</td> 
            <td>25%</td> 
            <td>dec 10, 2002 5:14 am</td> 
        </tr> 
        <tr> 
            <td>clark</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>$15.89</td> 
            <td>44%</td> 
            <td>jan 12, 2003 11:14 am</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>$153.19</td> 
            <td>44%</td> 
            <td>jan 18, 2001 9:12 am</td> 
        </tr> 
        <tr> 
            <td>bruce</td> 
            <td>evans</td> 
            <td>22</td> 
            <td>$13.19</td> 
            <td>11%</td> 
            <td>jan 18, 2007 9:12 am</td> 
        </tr> 
    </tbody> 
</table>

Adaxial

Answer 4

For single column xpapad is right

For multiple columns disabling sortings

headers: { 0: { sorter: false}, 1: {sorter: false}, 2: {sorter: false} }

http://tablesorter.com/docs/#Configuration

Hanna

Answer 5

In tablesorter v2.18.1, you can now target a column by the class name of an element inside of a header; note that the span has the targeted class name in the first name column.

HTML

 <table class="tablesorter">
   <thead>
    <tr>
     <th><span class="first-name">First Name</span></th>
     ...

JS

  $("table").tablesorter({
     headers: {
       '.first-name' : {
       sorter: false
     }
   }
 });

In tablesorter v2.0.5 and older, only the metadata and headers options methods were available.

In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:

• jQuery data data-sorter="false".

  <table class="tablesorter">
     <thead>
          <tr>
             <th data-sorter="false">Age</th>
             ....
  

• metadata class="{ sorter: false }". (This requires the metadata plugin)

• headers option headers : { 0 : { sorter: false } }.

  $("table").tablesorter({
      headers : { 0 : { sorter: false } 
  })
  

• header class name class="sorter-false".

  <table class="tablesorter">
     <thead>
          <tr>
             <th class="sorter-false">Discount</th>
             ....
  

• disable a column using jQuery data directly, but do it before the table initializes.

  $("table thead th:eq(5)").data("sorter", false); 
  $("table").tablesorter(
  

Whydah

Answer 6

FOOTABLE.js

The only solution I found working was :

to stop sorting : $('th').unbind(); to start sorting : $('table').trigger('footable_initialize');

Raynell