How to enable sorting only for one column in JQUERY Datatable
add class no-sort
to all the <th>
except the column which you want to sort.. kindly check https://jsfiddle.net/24zztcL9/
I have enabled sort only for 2nd column "Position"
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="no-sort">Name</th>
<th>Position</th>
<th class="no-sort">Office</th>
<th class="no-sort">Age</th>
<th class="no-sort">Start date</th>
<th class="no-sort">Salary</th>
</tr>
</thead>
</table>
jQuery
$(document).ready(function() {
$('#example').DataTable({
"ordering": true,
columnDefs: [{
orderable: false,
targets: "no-sort"
}]
});
});
For me the Accepted answer did not work
because in my table all <th>
has same class and i can't add another class to <th>
and also can not remove default class of <th>
,
My table's structure is as below:
<table id="example" class="mt-table" cellspacing="0" width="100%">
<thead>
<tr>
<th class="mt-head">Name</th>
<th class="mt-head">Position</th>
<th class="mt-head">Office</th>
<th class="mt-head">Age</th>
<th class="mt-head">Start date</th>
<th class="mt-head">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hari</td>
<td>Senior Engineer</td>
<td>Ahmedabad</td>
<td>20</td>
<td>11/02/2019</td>
<td>50,000</td>
</tr>
</tbody>
</table>
Now i also want to enable sort option for Position
column only.
what i have done is as below:
In my <script>
$(document).ready(function() {
$('#example').DataTable({
"ordering": true,
columnDefs: [
{
"orderable": true,
"targets": 1,
},
{
orderable: false,
targets: "mt-head"
}]
});
});
Now only Position column will be orderable and all others will be not.
So the rule is to put the column first of all which you want to sort in columnDefs
as above example after it you can put class selector to disable sorting on all other columns.
Rather than using columnDefs
I prefer using columns
like this:
$(document).ready(function() {
$('#example').DataTable({
"columns":[
{
"sortable": false
},
{
"sortable": true
},
{
"sortable": false
},
{
"sortable": false
},
{
"sortable": false
},
{
"sortable": false
}
]
});
});
Working JSFiddle
Either approach works, I just prefer the granular control of the columns
array.