Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Disable sorting of only one specific column in Data tables?

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();
like image 413
vishal ribdiya Avatar asked Nov 16 '17 05:11

vishal ribdiya


People also ask

How do you remove sorting from a column?

Go to the Home ribbon, click the arrow below the Sort & Filter icon in the Editing group and choose Clear.

How to prevent sorting in dataTable?

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.

How do I sort a specific column in a dataTable?

$('table'). dataTable({ "pageLength": -1, //display all records "order": [[ 0, "desc" ]] // Sort by first column descending }); Reference: Sorting.


2 Answers

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>
like image 110
Calvin Ananda Avatar answered Oct 15 '22 00:10

Calvin Ananda


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;
}
like image 26
Hassan Alhaj Avatar answered Oct 14 '22 23:10

Hassan Alhaj