CODEWITHSUNDEEP
datatables
jalf
jalf

Reputation: 585

Sort arrows in datatables to be removed

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

Upvotes: 3

Views: 20487

Answers (6)

satej kumar sahu
satej kumar sahu

Reputation: 309

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

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

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

Upvotes: 3

Rhalp Darren Cabrera
Rhalp Darren Cabrera

Reputation: 966

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; }

Upvotes: 1

Hasnain Mehmood
Hasnain Mehmood

Reputation: 417

> 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 });

Upvotes: 3

Rob
Rob

Reputation: 11

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>

Upvotes: 1

Ida N
Ida N

Reputation: 1951

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

Upvotes: 0

Ani
Ani

Reputation: 41

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

Upvotes: 4

Related Questions