Datatable布局异常排查:yadcf过滤器及页脚控件缺失问题
DataTables + yadcf 布局异常问题排查求助
我正在构建一款集成DataTables及各类插件的应用,期间发现多处异常布局问题,遂制作了复现示例。但在排查过程中又出现新问题且无法解决,目前面临以下两个核心问题:
yadcf过滤器显示不完整;- 页脚存在缺陷:分页长度选择器、分页控件缺失,且控制台未出现任何JS报错。
更新1:已解决第1列的调整问题,但yadcf的range_number_slider渲染异常,怀疑缺失相关资源。
以下是相关代码片段:
$(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": 135, "_id": 7, "_include": true } ] }); });
内容的提问来源于stack exchange,提问作者MBaas
相关产品推荐
相关产品推荐

