Remove checkbox from header

dmerc

Hi there,
I have just started getting into Data Tables and am struggling with trying to remove a checkbox from the header cell of the column. I am using checkboxes to help the user see when a column is selected but I can't figure out how to remove the one that is inserted automatically in the header of the column that is making it look a bit ugly. I am probably missing something really obvious.

Here is the Javascript I am using.
Any help is appreciated.
Thanks.

$('#grAddUserTable').DataTable({
                
                columnDefs: [ {
                        
                        orderable: false,
                        className: 'select-checkbox',
                        targets:   0
                    } ],
                    select: {
                        style:    'os',
                        selector: 'td:first-child'
                    },
                    order: [[ 1, 'asc' ]],
               
                pageLength: 5,
                responsive: true
              
            });

dmerc

I am assuming this is not possible currently, as nobody seems to have responded.
Perhaps it can be added to the wish list for future versions.

Thanks

kthorngren

I put together a page with your code snippet and don't get the checkbox in the header. Please update this test case with your config to show the problem:
http://live.datatables.net/pehosefe/1/edit

Kevin

dmerc

I have had a look at your example and I cannot get it to behave in the same way as I am experiencing. The only difference I can see is that you use jquery.datatables.js and I use datatables.min.js (which is from INSPINIA bootstrap theme (here), but seems to be latest version of data tables.

I can see that the HTML that is created adds a 'before' object (see image), whereas yours does not, but I cannot see how that is being added.

I have tried adding a footer and I get the same issue with that as well. I am stumped!

kthorngren

Interesting, I think you found it. My sample used version 1.2.0 of the Select extension. I noticed looking at one of the Editor examples that the checkbox is in the heading. It uses 1.2.1 of the Select extension. Comparing the two 1.2.1 I found added th.select-checkbox stylings along with the td.select-checkbox stylings.

You can probably remove those to resolve you issue or maybe use 1.2.0 version of the Select CSS.

Kevin

allan

Its a bug in the latest release of Select I'm afraid. This commit fixed it and the nightly will have the fix.

Allan

dmerc

Thank you for your help. The update has indeed fixed the problem.

rohmatchan

put on your javascript code

var inputs, index;
var form = document.getElementById('grAddUserTable');
inputs = form.getElementsByTagName('div');
for (index = 0; index < inputs.length; ++index) {
inputs[0].innerHTML = "";
};

very work..