Sort Icons Showing on orderable false columns

kripton76

Hi there my table has a couple of non sortable columns which I have set to orderable false. However on initial load of the table the bootstrap 4 sort icons are showing. How can I prevent the icons on loading on initial load?

colin

Hi @kripton76 ,

I just tried that, see here, and it's working as expected for me. Could you modify that example or link to your page to demonstrate the issue, please.

Cheers,

Colin

kripton76

The issue is the blank space..
my code:

            columnDefs: [{ targets: [0,7], orderable: false },
                { "searchable": false, "targets": [0,7] }]

Notice no blank space in between 0,7
I replaced that with your code which has a space inbetween

2," "4

so I changed mine to

{ targets: [0, 7], orderable: false } and 
{ "searchable": false, "targets": [0, 7] }

colin

Ah, no, whitespace isn't the issue there - whitespace is ignored. The problem is that you've got two blocks for the same targets,

columnDefs: [
  { targets: [0,7], orderable: false },
  { "searchable": false, "targets": [0,7] }
]

You need to combine them into one, like this:

columnDefs: [
  { targets: [0,7], orderable: false, searchable: false }
]

Cheers,

Colin

kripton76

Hey Colin, my mistake.. this still causing me issues.. I have caching enabled which made me think this was fixed .. however the issue is still happening on initial load. I am using datatables.boostrap4.css so the icons are showing on initial load for non sortable columns..

colin

OK, could you modify that example in my first reply please so that it's showing the problem, or link to your page, please.

Cheers,

Colin

Brett_H

Hi Colin & Krypton76,

I recently encountered the same initial show sort icon on a non sortable column and I believe the issue is that its the 1st column and therefore becomes the default sort col if this is not specified.

I was able to prevent the icon appearing on start up by adding

order: [[1 , "asc"]]

to my initialisation.

Initial state to generate issue

$('#projects').DataTable(
    {
        paging: false, 
        searching: true,
        columnDefs: [{targets:[0], orderable: false, searchable: false}]
    }
);

Modified init that prevents issue

$('#projects').DataTable(
    {
        paging: false, 
        searching: true,
        order: [[1 , "asc"]],
        columnDefs: [{targets:[0], orderable: false, searchable: false}]
    }
);

Hope that helps.

Brett