Sort arrows in datatables to be removed

Question

Need help in removing sort arrows (asc and desc) on data tables header row, then when the user click the header column an ascending arrow will appear and of course data will be sorted in asc order

Answer 1

"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 1, 3 ] } ]

To remove sort arrows from the second and the fourth columns.

ref -> http://wordpress.org/support/topic/plugin-wp-table-reloaded-removing-the-updown-sorting-arrows-on-specific-columns

Answer 2

HOW TO REMOVE DATATABLES GLYPHCONS / ICONS !!

Use this following code on your css file : if you see the column glyph-cons on Table header use this !!

th.sorting_asc::after, th.sorting_desc::after { content:"" !important; }

if you see the glyph-cons on Table data use this !!

td.sorting_asc::after, td.sorting_desc::after { content:"" !important; }

in short change "this" part, where the class="sorting_desc/asc" situated.

"this".sorting_asc::after, "this".sorting_desc::after { content:"" !important; }

Answer 3

> This is Best Answer for removing sort arrow
> 
> 
> $('#itjbg-table').dataTable({
>     'columnDefs': [{ 'orderable': false, 'targets': 0 }], // hide sort icon on header of first column
>     'aaSorting': [[1, 'asc']] // start to sort data in second column });

Answer 4

 $("#MyDataTable").dataTable({            
 "aoColumns": [{"bSortable": false}, null]        
 }); 

Answer 5

Within dataTables.Bootstrap.css are three classes that add these sort images. They are sorting, sorting_asc, and sorting_desc. During the DataTable initialization disable sorting as first stated by "satej kumar sahu" via the bSortable : false. Then do a removeClass for the header, my header had an id="division". Then create a click event for the header, same id, to do a another removeClass to preserve any other functionality, in my case to preserve the column dropdown via columnFilter. Review attached code.

$('#example').dataTable({
            "order": [[1, "asc"], [7, "asc"], [4, "asc"]],
            "aoColumnDefs": [{ "bSortable": false, "aTargets": [1]}],
            "columns":[null, {className: ""}, null, null, null , null, null, null, null, null]
        }).columnFilter({
            sPlaceHolder: "head:after",
            aoColumns: [null, { type: "select" }, null,
            null, null, null, null, null, null, null]
        });
        $('#division').removeClass('sorting sorting_asc sorting_desc');


$('#division').click(function () {
        		    $('#division').removeClass('sorting sorting_asc sorting_desc');
        		});

table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

<thead>
                    <tr class="info">                                     
					    <th scope="col">Title</th>
					    <th id="division" scope="col">Division</th>                        
                        <th scope="col">Attendee</th>
                        <th scope="col">Supervisor</th>
					    <th scope="col">Start Date</th>
					    <th scope="col">End Date</th>
                        <th scope="col">Duration(hr)</th>
					    <th scope="col">Fee</th>
                        <th scope="col">Status</th>
                        <th scope="col">Comments</th>					   
                    </tr>    
                </thead>

Answer 6

what I got from your question is that you want to remove initial sort from the table and only sort when the user clicks on a column header. you can do that using the following code:

$(document).ready( function() {
  $('#example').dataTable( {
    "aaSorting": []
  } );
} );

http://datatables.net/ref#aaSorting