Disable bootstrap sorting for certain columns - asp.net-mvc

Question

I'm new to bootstrap so I hope that you will be able to help me out. I did some searching on the internet but I can't find a solution that works for me. I want to disable sorting for all of the columns except for the last two which i want to sort in descending order:
#model CCQAS.WebApp.Areas.Credentialing.Models.CredCustodyViewModel
#using CCQAS.API.Model
#{Layout = "~/Areas/Credentialing/Views/Shared/_CredLayout.cshtml";
ViewBag.Title = "Custody History";}
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
#ViewBag.Title
</h3>
</div>
#{if (Model.CredCustodyList.Count > 0)
{
<table class="table table-striped table-bordered" id="myTable">
<thead>
<tr>
<th class="text-center">
UIC
</th>
<th class="text-center">
POC
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.CredCustodyList[0].DescriptionTxt)
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.CredCustodyList[0].EffectiveDate)
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.CredCustodyList[0].EndDateString)
</th>
</tr>
</thead>
#foreach (CredCustody credCustody in Model.CredCustodyList)
{
<tr>
<td>
#credCustody.MTFNameTxt<br />
#credCustody.MTFCity <span> </span>#credCustody.UIC
</td>
<td>
#credCustody.PublicAffairsCoorTxt <br />
<span>Phone: </span> #credCustody.MTFCommPhoneTxt <br />
<span>DSN: </span> #credCustody.MTFDSNPhoneTxt <br />
<span>Fax: </span> #credCustody.MTFFaxPhoneTxt <br />
<span>Email: </span> #credCustody.MTFEmailTxt
</td>
<td>
#credCustody.DescriptionTxt
</td>
<td>
#credCustody.EffectiveDateString
</td>
<td>
#credCustody.EndDateString
</td>
</tr>
}
</table>
}
else
{
<p>
<h3 class="text-center">No Records Found</h3>
</p>
}
}
</div>
</div>
</div>
#section scripts{
<script>
$(document).ready(function () {
initializeDataTableNoPaging();
#*Disables all columns from sorting except for the last two: Effective Date and End Date*#
$('#myTable').tablesorter({
"aoColumns": [
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
null,
null
]
});
});
</script>
}

Answer 1

As explained in the documentation from here you need to mark which columns you don't want to be sortable using the headers option.
In your code use:
$('#myTable').tablesorter({
headers: {
0: {
sorter: false
},
1: {
sorter: false
},
2: {
sorter: false
}
}
});

Answer 2

I found a solution. The first thing that I had to do was give a name to my headers:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-center">
UIC
</th>
<th class="text-center" id="POC_header">
POC
</th>
<th class="text-center" id="Desc_header">
#Html.DisplayNameFor(model => model.CredCustodyList[0].DescriptionTxt)
</th>
<th class="text-center" id="Effective_header">
#Html.DisplayNameFor(model => model.CredCustodyList[0].EffectiveDate)
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.CredCustodyList[0].EndDateString)
</th>
</tr>
</thead>
Second, I added this code to disable the sorting:
#section scripts{
<script>
$(document).ready(function () {
initializeDataTableNoPaging();
#*Disables all columns from sorting except for the last two: Effective Date and End Date*#
$("#POC_header").off('click'); //disables click event
$("#POC_header").addClass("sorting_disabled");
$("#POC_header").removeClass("sorting_asc");
$("#Desc_header").off('click'); //disables click event
$("#Desc_header").addClass("sorting_disabled");
$("#Desc_header").removeClass("sorting"); //needed to remove the sorting class to get rid of the sorting arrows on header
$("#Desc_header").removeClass("sorting_asc");
$("#Effective_header").addClass("sorting_desc");
$("#Effective_header").removeClass("sorting_asc"); //Sorts effective date in descending order
});
</script>
}