Only one column sorting using JQuery Table Sorter Plug-In

Question

I'm using jQuery's tablesorter plugin to sort my gridview on the client side. But here is the problem, i have to make that sorting option available to only one column. (column number is 7 in gridview)

 $("#<%=gvResults.ClientID%>").tablesorter();

How can we make it possible with table sorter plug-in. Any suggestions please

Answer 1

If you know the column index that will have sorting enabled, then set the headers option as follows:

$(function(){
  $('table').tablesorter({
    headers : {
      // zero-based column index
      0 : { sorter: false },
      1 : { sorter: false },
      2 : { sorter: false },
      3 : { sorter: false },
      4 : { sorter: false },
      5 : { sorter: false }
    }
  });
});

The above code works on both the original tablesorter and my fork of tablesorter.

If you happen to be using my fork of tablesorter, then you can add class names to the headers:

<th class="sorter-false">column 1</th>
<th class="sorter-false">column 2</th>
<th class="sorter-false">column 3</th>
<!-- etc -->
<th>column 7</th>

and then initialize tablesorter without any extra options:

$(function(){
  $('table').tablesorter();
});

Answer 2

Eliminate the class 'header' from headers you don't want sortable, for example if its only the seventh row you want sortable, write

$('.header').not('.header:nth-child(7)').removeClass('header');

Run this on start by adding this html:

<script>
    $(document).ready(function()
    {
        $('.header').not('.header:nth-child(7)').removeClass('header');
        $('.header').not('.header:nth-child(7)').click(function(event)
        {
            event.preventDefault();
        });
        $('.headerSortDown').removeClass('headerSortDown');  // fixes a bug
        $('.headerSortUp').removeClass('headerSortUp');  // fixes a bug
    });
</script>