Select is duplicating checkbox and not showing in the header
Select is duplicating checkbox and not showing in the header
DavisDS85
Posts: 2Questions: 1Answers: 0
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.
Answers
I built a test case for you:
https://live.datatables.net/dodobuge/79/edit
It looks like the problem occurs when
orderingis setfalse. Uncomment//ordering: false,and the header checkbox won't appear. @allan will need to take a look.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
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.
@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