Select is duplicating checkbox and not showing in the header

DavisDS85

Link to test case: N/A
Debugger code (debug.datatables.net): N/A
Error messages shown: N/A
Description of problem: DataTables Select is showing up as an elongated rectangle when using render: DataTable.render.select() that when selected duplicates the checkbox.

Replicate: I used the DataTables Download Package to create a custom pacakge with DataTables 2.0.5, Editor 2.3.2, Buttons 3.0.2, DateTime 1.5.2, and Select 2.0.1 using the Jquery-UI theme. After adding the css and js to my site, I have attempted to add checkboxes to the table as follows.

<table id="notification_table" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Assignment</th>
            <th>Client</th>
            <th>Address</th>
            <th>Status</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <th></th>
            <th>Assignment</th>
            <th>Client</th>
            <th>Address</th>
            <th>Status</th>
        </tr>
    </tfoot>
</table>

var today = new Date();
    var from = today.format("yyyy-mm-dd 00:00:00");
    var to = today.format("yyyy-mm-dd 23:59:59");
    var table = $('#notification_table').DataTable({
    ajax: {
        type: "GET",
        url: REST.URL + 'assignment?from=' + from + '&to=' + to,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-WP-Nonce', REST.Nonce);
        },
        "dataSrc": function ( json ) {
            console.log(json);
            return json.data;
        }
    },
    searching: false,
    ordering: false,
    paging: false,
    autoWidth: false,
    columns: [
        {
            data: null,
            render: DataTable.render.select()
            // className: 'select-checkbox'
        },
        {
            data: 'assignment_name', 
            className: 'dt-left',
            width: '15%'
        },
        {
            data: 'name', 
            className: 'dt-left',
            width: '20%'
        },
        {
            data: 'address', 
            className: 'dt-left',
            width: '40%'
        },
        {
            data: 'acknowledged', 
            className: 'dt-left',
            width: '20%', 
        }
    ],
    columnDefs: [{
        "defaultContent": "",
        "targets": "_all"
    }],
    select: {
        style: 'multi+shift',
        selector: 'td:first-child',
        headerCheckbox: true
    },
    order: [[1, 'asc']]
    });

When I use className: 'select-checkbox' the checkbox looks and selects okay, but there is no input field. When I use render: DataTable.render.select() the checkbox is elongated and selecting it causes the checkbox to duplicate. In both cases, there is no checkbox in the header.

kthorngren

I built a test case for you:
https://live.datatables.net/dodobuge/79/edit

It looks like the problem occurs when ordering is set false. Uncomment //ordering: false, and the header checkbox won't appear. @allan will need to take a look.

When I use render: DataTable.render.select() the checkbox is elongated and selecting it causes the checkbox to duplicate.

There must be a styling conflict on your page. The test case includes the jQuery UI theme and doesn't exhibit either of these behaviors. Make sure you have removed any old Datatables .js and .css includes. Maybe the conflict can be found by inspecting the checkbox elements on your page to see how they compare with the test case. Can you update the test case or provide a link to your page to show the styling issues?

Kevin

saulfemm

I am also experiencing this, however the checkbox in the header still does not appear for me after setting ordering: true.

I don't believe I am seeing the styling issues mentioned by OP.

kthorngren

@saulfemm Without seeing what you are trying to use its hard to say what the problem might be. See this example. If this doesn't help then please post a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

Hi,

Apologies for this one having slipped past me. It is quite an interesting one! If you disable search and ordering then the type detection method doesn't run. The upshot is that the column doesn't get a dt-select class, and in turn the header renderer doesn't put a checkbox in the header!

The workaround for the moment is to add className: 'dt-select' for the column: https://live.datatables.net/dodobuge/88/edit .

The impact of the bug isn't limited to just Select's checkbox - but rather you'll see that the auto class assignment for numbers and dates doesn't work in that example.

I'm going to rework the type detection for 2.1, and I've filed a bug so I make sure I get this sorted out as well as part of that.

Thanks,
Allan