What causes the layout problems of my Datatable? - datatables

Question

I am building an app in which I want use Datatables with various plugins and I observed some weird layout-problems. So I tried to build a repro. And as worked on that, new problems occurred and I even failed to sort these out.
So here I am with the current state of my fiddle
I have no idea what's causing these issues. I have attached a bit of code (because it is required, but with reduced data). The issues I'm currently struggling with:
yadcf-Filters incomplete...
footer-defects: pagelength-selector missing, paging-controls missing. Whenever I saw that in the past, there were some JS-Errors (usually with my code), but this time I'm not seeing anything in the console.
Update1: I've now managed to get rid of column1-resizing. The range_number_sliderfor yadcf does not render correctly - am I missing a resource??
Updated fiddle here.
$(function() {
dtObj = $("#dataset").DataTable({
"buttons": [{
"columns": ":gt(1)",
"extend": "colvis",
"text": "Series"
}],
"scrollX": true,
"dom": "Bfrtip",
"lengthMenu": [
[10, 25, 50, -1],
["10 rows", "25 rows", "50 rows", "Show all"]
],
"columns": [{
"data": "_include",
"render": function(data, type, row, meta) {
var res = '';
if (row._include) {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye"></i></span>';
} else {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye-slash"></i></span>';
}
return res;
},
"title": "Include",
"visible": true,
"width": "2em;"
}, {
"data": "_id",
"title": "ID",
"visible": false
}, {
"className": "text-right",
"data": "Car",
"title": "Car",
"visible": false,
"width": "80px"
}, {
"data": "Eyes",
"title": "Eyes",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Family",
"title": "Family",
"visible": false,
"width": "80px"
}, {
"data": "Hand",
"title": "Hand",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "HealthCare",
"title": "HealthCare",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Height",
"title": "Height",
"visible": true,
"width": "80px"
}, {
"data": "Major",
"title": "Major",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Marriage",
"title": "Marriage",
"visible": false,
"width": "80px"
}, {
"data": "Party",
"title": "Party",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Pot",
"title": "Pot",
"visible": false,
"width": "80px"
}, {
"data": "Sex",
"title": "Sex",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "ShoeSize",
"title": "ShoeSize",
"visible": false,
"width": "80px"
}, {
"data": "State",
"title": "State",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Student",
"title": "Student",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Weight",
"title": "Weight",
"visible": false,
"width": "80px"
}],
"createdRow": function(row, data, dataIndex) {
row.id = 'r' + data._id;
if (!data._include) {
$(row).children(":gt(2)").addClass('excludeRow');
}
},
"data": [{
"Car": 1,
"Eyes": "Blue",
"Family": 3,
"Hand": "R",
"HealthCare": 2,
"Height": 72,
"Major": "FIN",
"Marriage": 5,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11.5,
"State": "PA",
"Student": 1,
"Weight": 220,
"_id": 1,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 4,
"Hand": "R",
"HealthCare": 1,
"Height": 62,
"Major": "ACC",
"Marriage": 1,
"Party": "D",
"Pot": 5,
"Sex": "F",
"ShoeSize": 9,
"State": "PA",
"Student": 2,
"Weight": 140,
"_id": 2,
"_include": true
}, {
"Car": 0,
"Eyes": "Blue",
"Family": 0,
"Hand": "R",
"HealthCare": 3,
"Height": 69,
"Major": "FIN",
"Marriage": 1,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 3,
"Weight": 195,
"_id": 3,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 69,
"Major": "OIM",
"Marriage": 1,
"Party": "D",
"Pot": 3,
"Sex": "M",
"ShoeSize": 9.5,
"State": "PA",
"Student": 4,
"Weight": 190,
"_id": 4,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 1,
"Hand": "L",
"HealthCare": 2,
"Height": 70,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 5,
"Sex": "M",
"ShoeSize": 10.5,
"State": "CT",
"Student": 5,
"Weight": 150,
"_id": 5,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 4,
"Height": 66,
"Major": "ACC",
"Marriage": 2,
"Party": "R",
"Pot": 3,
"Sex": "M",
"ShoeSize": 8.25,
"State": "NJ",
"Student": 6,
"Weight": 125,
"_id": 6,
"_include": true
}, {
"Car": 0,
"Eyes": "Brown",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 67,
"Major": "BA",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 9,
"State": "NY",
"Student": 7,
"Weight": 155,
"_id": 7,
"_include": true
}, {
"Car": 1,
"Eyes": "Green",
"Family": 2,
"Hand": "L",
"HealthCare": 1,
"Height": 72,
"Major": "OIM",
"Marriage": 2,
"Party": "I",
"Pot": 4,
"Sex": "M",
"ShoeSize": 13,
"State": "PA",
"Student": 8,
"Weight": 260,
"_id": 8,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 72,
"Major": "BA",
"Marriage": 2,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 10.5,
"State": "NY",
"Student": 9,
"Weight": 155,
"_id": 9,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "ACC",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 12,
"State": "CT",
"Student": 10,
"Weight": 180,
"_id": 10,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 2,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 11,
"Weight": 160,
"_id": 11,
"_include": true
}]
});
yadcf.init($("#dataset").DataTable(), [{
"column_number": 0,
"filter_type": "range_number_slider"
}, {
"column_number": 1,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 2,
"filter_type": "range_number_slider"
}, {
"column_number": 3,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 4,
"filter_type": "range_number_slider"
}, {
"column_number": 5,
"filter_type": "range_number_slider"
}, {
"column_number": 6,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 7,
"filter_type": "range_number_slider"
}, {
"column_number": 8,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 9,
"filter_type": "range_number_slider"
}, {
"column_number": 10,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 11,
"filter_type": "range_number_slider"
}, {
"column_number": 12,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 13,
"filter_type": "range_number_slider"
}, {
"column_number": 14,
"filter_type": "range_number_slider"
}]);
});
[1]: https://jsfiddle.net/mbaas/fbo0L88v/

Answer 1

Solved the issues with the Datatable (most notable I did not load the appropriate .css to support Bootstrap for the addons), I then had an issue with the pagelength-control not being wide enough to fully show the text for the "All"-Selection - that required some changes to the CSS which Allan will include in his downloads.
Just in case anyone else hits this:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
}
Then I had an issue with vertical alignment of the controls surrounding the table - that needed a slightly more evolved dom-setting than I had:
"<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12'i>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>"
This should become significantly easier with one the next releases...
Even after sorting all that out, the yadcf-issue remained - but that seems to be a real bug, so I posted an issue on GitHub.