Suppose i have the table like below :
And I want to disable sorting of Action Column
<!--index.html-->
<table class="table table-striped table-bordered post-list-table" id="table" >
<thead>
<tr>
<th>Title</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
</table>
<!--Script.js-->
$('#table').DataTable();
Go to the Home ribbon, click the arrow below the Sort & Filter icon in the Editing group and choose Clear.
If you want to remove sorting arrows or disable sorting on specific columns in datatables library than you can do it using columnDefs. we can simple disable ordering arrows from table in data tables js. even you are using with php, laravel, codeigniter, vue js etc.
$('table'). dataTable({ "pageLength": -1, //display all records "order": [[ 0, "desc" ]] // Sort by first column descending }); Reference: Sorting.
Try adding : columns.orderable
"columnDefs": [
{ "orderable": false, "targets": 2 }
]
JSFiddle Here
<!--Script.js-->
$('#table').DataTable( {
"columnDefs": [
{ "orderable": false, "targets": 2 }
]
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered post-list-table" id="table" >
<thead>
<tr>
<th>Title</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
</table>
Add a class to columns which you want to disable sort
<th class="no-sort">Operations</th>
then add the following style to your css
table.datatable thead th.no-sort {
background: none;
pointer-events: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With