0 : { sorter: false } option disable all the elements inside that column

[gitpuneetsvyas]

Hi Mottie,
suppose you have which includes a drop down and a label making 0 : { sorter: false } makes disable the entire th locked i want drop down to be keep displaying while sorting should be disabled i am using tablesorter 1.1.0 version since this is a legacy app.

my sample code

<th class="sorter-false" style="width:25%" align="left"  id="byRentalStatus">
STATUS
						
	<select disabled="false" class="sorter-false" align="right"  id="rentalStatus" onChange="filterRentalAgreementByStatus('filterDataForMYRental','SearchRentalAgreementsServlet');">
						
	<c:forEach var="rentalStatus" items="${RentalAgreementsSearchBean.rentalStatusList}">
	<option value="${rentalStatus.id}" ${rentalStatus.id==filterRentalStatusId ? 'selected="selected"':""}>${rentalStatus.getDescription()}</option>
	</c:forEach>
</select>
</th>

[gitpuneetsvyas]

any pointers/expert comment kindly suggest

[Mottie]

Hi @gitpuneetsvyas!

I'm not completely sure what you're asking. I've never seen tablesorter v1.1.0, the earliest version I've ever worked on was v2.0.5b. Are you sure you're using tablesorter?

[gitpuneetsvyas]

Yes sir

[Mottie]

Please share an example of the JS and HTML.

You can modify this demo of the original tablesorter, or this demo using my fork of tablesorter. I'll be unavailable for a few hours, so no need to rush.

[gitpuneetsvyas]

Hi Mottie,

this is the example i created using old version of jquery and table sorter which we are using
https://jsfiddle.net/cpuneetvyas/o2gxgz9r/21973/

i want to keep drop down enabled while disabling the sorting on that column .
i want to remove class="header headerSortUp" as per my example shown in this post however keeping drop down enabled
Please suggest any pointers

[Mottie]

That older version doesn't ignore form elements within the header. It was fixed in v2.17.1; but I would recommend updating to the latest version.

[gitpuneetsvyas]

Thanks sir is there any other way or workaround to do so without changing the version;i tried with JQUERY/DOM way of enabling the drop down however i didn't have any good luck.
Looking forward for your suggestion.

[gitpuneetsvyas]

I have replaced my old version jquery.tablesorter.js with new version but i was not seen drop down being enabled nor i see sorting images(asc and dsc) being applied on the column.
Please suggest

[Mottie]

Look in the developer console (press F12, console tab) for any errors. Then share any error messages here, and please provide the code you're using to initialize tablesorter.

[gitpuneetsvyas]

I don't see any error on console;
this is the initialization code

$("table.tablesorter").customTableSorter({
				hideSearchResultsLabel: true,
				columnSorting: {
	/* Checkboxes */		0: { sorter: "checkbox" },
	/* Demo Form Number */	1: { sorter: "digit" },
							2: { sorter: false },
							/*2:{sorter: "select"} ,*/
	/* Start Date */		4: { sorter: "digit" },
	/* End Date */			5: { sorter: "jdquoteDate" }
				},
				cancelSelection :false
				
				
			
			
			});
		});
	})(jQuery); 

[gitpuneetsvyas]

customTableSorter .js file code

;(function($){var
rgxJdquoteDate=/(\d{1,2})[-/]?(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)[-/]?([12]\d{3})/i,rgxCheckboxHTML=/<input(?:[^>"']|(?:\"[^"]*\")|(?:\'[^']*\'))+type=(['"]?)checkbox\1(?:[^>"']|(?:\"[^"]*\")|(?:\'[^']*\'))*>/i,rgxChecked=/checked/i;$.tablesorter.addParser({id:'jdquoteDate',is:function(s){return s.match(rgxJdquoteDate)?true:false;},format:function(s){var matches=s.match(rgxJdquoteDate)||["","","",""],day=matches[1],month=matches[2].toLowerCase(),year=matches[3],regularDate=new Date();if(month=="jan"){month=1;}else if("feb"==month){month=2;}else if("mar"==month){month=3;}else if("apr"==month){month=4;}else if("may"==month){month=5;}else if("jun"==month){month=6;}else if("jul"==month){month=7;}else if("aug"==month){month=8;}else if("sep"==month){month=9;}else if("oct"==month){month=10;}else if("nov"==month){month=11;}else if("dec"==month){month=12;}else{return 0;}
regularDate.setFullYear(year,month,day);return regularDate;},type:'numeric'});$.tablesorter.addParser({id:'checkbox',is:function(s){return rgxCheckboxHTML.test(s);},format:function(s){return rgxChecked.test(s)?1:0;},type:'numeric'})
$.fn.jdquoteTableSorter=function(options){this;options=$.extend({},$.fn.jdquoteTableSorter.defaults,options);return this.each(function(){var $table=$(this),rowCount=$table.find("TBODY TR").length,colCount=$table.find("THEAD TR:first TH").length,headersOptions={},i,pagerSelector="#pager";if(!$table.is("table.tablesorter")){return;}
if(options.hideSearchResultsLabel){$("DIV.tablesorterCaption H3").hide();}
if(options.maximumRowCount<=rowCount){for(i=0;i<colCount;i++){headersOptions[i]={sorter:false};}}
else{headersOptions=options.columnSorting;}
$table.tablesorter($.extend({},options.tableSorterOptions,{headers:headersOptions}));if(!options.sortWithDirtyCache){$table.bind("sortStart",checkDirtyCache).find("input").bind("change",function(){$table.data("dirtyCache",true);}).end();}
if(10<rowCount){$table.tablesorterPager({container:$(pagerSelector),positionFixed:false});if(options.submitAllFormElements){$table.parents("FORM").bind("submit",handleSubmit).bind("submitCancel",handleSubmitCancel);}}
else{$(pagerSelector).hide();$table.bind("rebuildPagedCache",function(event){$(this).trigger("update");});}});};$.fn.jdquoteTableSorter.defaults={hideSearchResultsLabel:false,maximumRowCount:20000,columnSorting:{0:{sorter:"digit"}},tableSorterOptions:{widthFixed:false,widgets:['zebra']},submitAllFormElements:true,sortWithDirtyCache:false};function handleSubmit(event){this;var $this=$(this),$table=$this.find("TABLE.tablesorter");if(!event.isDefaultPrevented()){$table.each(function(){this;var $this=$(this);$this.find("TBODY").hide();$this.trigger("removePagination");});}}
function handleSubmitCancel(event){this;var $this=$(this),$table=$this.find("TABLE.tablesorter");event.preventDefault();$table.each(function(){this;var $this=$(this);$this.find("TBODY").show();$this.trigger("restorePagination");});}
function checkDirtyCache(event){this;var $this=$(this);if($this.data("dirtyCache")){$this.trigger("rebuildPagedCache");$this.data("dirtyCache",false);}}})(jQuery);

[Mottie]

I updated this demo to use tablesorter v2.17.1 to show that everything works... The custom code above shouldn't effect the select.

I'd still recommend using at least jQuery v1.12.4 and tablesorter v2.29.5.

[gitpuneetsvyas]

Thanks Mottie since i am using legacy app we are bound to not change the table sorter version.
we are using table sorter 2.0.3 and jquery 1.3.1.min.js. i wrote below code remove the header,headerup and header down css classes as well as the header click event however still dodn't able to enable the dropdown.
Could you please suggest any turnaround?

[gitpuneetsvyas]

Please suggest work around to enable dropdown

`
$(document).ready(function() {

		 $(window).load(function() { 
			 alert("page loaded");
			$('#mytable thead:nth-child(1) th:nth-child(3)').removeClass('header');
			$('#mytable thead:nth-child(1) th:nth-child(3)').removeClass('headerSortDown');
			$('#mytable thead:nth-child(1) th:nth-child(3)').removeClass('headerSortUp');
			
			$('#mytable thead:nth-child(1) th:nth-child(3)').addClass('rentalStatus');;
			$('#mytable thead:nth-child(1) th:nth-child(3)').unbind('click');
			 
			
			 alert("page removed");
			 
			 
		     //insert all your ajax callback code here. 
		     //Which will run only after page is fully loaded in background.
		  });

));

`