Skip to content Skip to sidebar Skip to footer

How To Disable Sorting On Column In Jquery.tablesorter?

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 do

Solution 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/

Solution 2:

Also you can use html data attribute:

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

Or you can use a class:

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

Solution 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 
            } 
        } 
    }); 
});
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script><linkrel='stylesheet'href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css'type='text/css' /><tableid='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>

Solution 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

Solution 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

<tableclass="tablesorter"><thead><tr><th><spanclass="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".

    <tableclass="tablesorter"><thead><tr><thdata-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".

    <tableclass="tablesorter"><thead><tr><thclass="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(
    

Post a Comment for "How To Disable Sorting On Column In Jquery.tablesorter?"