我正在构建一个应用程序,在这个应用程序中,我想使用带有各种插件的数据表,我发现了一些奇怪的布局问题。所以我试着制造一个复制品。在这方面的工作中,出现了新的问题,我甚至没能解决这些问题。
所以我现在的状态是
fiddle
我不知道是什么导致了这些问题。我附加了一点代码(因为它是必需的,但是数据减少了)。我目前面临的问题是:
-
yadcf
-筛选器未完成…
-
页脚缺陷:缺少pagelength选择器,缺少分页控件。每当我在过去看到这一点时,都会出现一些JS错误(通常是我的代码),但这次我在控制台中看不到任何东西。
更新1
range_number_slider
因为yadcf不能正确呈现-我是否缺少资源??
更新的小提琴
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:
