H.Burns H.Burns - 3 months ago 17
Javascript Question

how to disable sorting effect on the first column of a datatable

In the datatable construct given below, if the column headers are clicked, the table content gets sorted with respect to the column which is clicked. I want to remove this sorting functionality from the first column i.e Name is clicked, no sorting would happen. I have tried few mechanisms but none of them seems to be working. Can anybody please suggest a solution ?



The code goes below :




$(document).ready(function() {
$('#table_1').DataTable({
"columns": [
{ "width": "1%" },
null,
null,
null,
],
"paginate": false,
// "scrollY": "475px",
// "scrollX": "100%",
"bSort" : true,
bFilter: true,
bInfo: true,
"scrollCollapse": true,
"dom": '<"toolbar">frtip',
"oLanguage": {
"sSearch": "Search"
},
"sScrollY": "200px",
"bAutoWidth": false,
/*"columnDefs": [
{ "orderable": false, "targets": 0 },
// { targets: 'no-sort', orderable: false },
], */

});

});

<html>

<head>
<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<table id="table_1" name="table_1" class="display cell-border compact" cellspacing="0" border ="1" align = "center" width="10%">
<thead>
<tr bgcolor= "blue">
<th align=right>Name</th>
<th align=right>Place</th>
<th align=right>D.O.J</th>
<th align=right>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td align=right>John</td>
<td align=right>Bristol</td>
<td align=right>03-09-2015</td>
<td align=right>999999</td>
</tr>
<tr>
<td align=right>Mark</td>
<td align=right>Leeds</td>
<td align=right>03-06-2015</td>
<td align=right>9999777</td>
</tr>
</tbody>
</table>

</div>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>

<script type="text/javascript" src ="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>



</head>
<body>




<style>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css"/>



</style>
</body>

</html>




Answer

the bSortable indicated in the definition of columns, try this ..

$(document).ready(function() {
 $('#table_1').DataTable({
   "columns": [
        { "width": "1%" },
        null,
        null,
    null,
    ],
     "paginate": false,
   // "scrollY": "475px",
   // "scrollX": "100%",
    "bSort" : true,
    bFilter: true,
    bInfo: true,
    "scrollCollapse": true,
    "dom": '<"toolbar">frtip',
    "oLanguage": {
    "sSearch": "Search"
    },
"aaSorting": [[ 1, "asc" ]],
    "sScrollY": "200px",
    "bAutoWidth": false,
"columnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] }
    ], 

});

});
Comments