Что вызывает проблемы с разметкой моего Datatable?
Я создаю приложение, в котором хочу использовать Datatables с различными плагинами, и я заметил некоторые странные проблемы с макетом. Поэтому я попытался построить репро. И по мере работы над этим возникали новые проблемы, и я даже не мог с ними разобраться. Итак, вот я с текущим состоянием моего рабочий пример
Я понятия не имею, что вызывает эти проблемы. Я приложил немного кода (потому что он необходим, но с уменьшенными данными). Проблемы, с которыми я сейчас борюсь:
yadcf-Фильтры неполные ...- дефекты нижнего колонтитула: отсутствует селектор длины страницы, отсутствуют элементы управления разбиением на страницы. Всякий раз, когда я видел это в прошлом, были некоторые JS-ошибки (обычно с моим кодом), но на этот раз я ничего не вижу в консоли.
Обновление1: теперь мне удалось избавиться от изменения размера column1. range_number_sliderfor yadcf не отображает правильно - мне не хватает ресурса ??
Обновлен скрипт здесь.
$(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/
Извините - исправлено (колвис отсутствовал). Проблема yadcf, для которой я надеюсь опубликовать образец, в конечном итоге заключается в том, что первый видимый фильтр охватывает 2 столбца. Как только я принудительно перерисовываю таблицу (делая видимыми другие столбцы), проблемы исчезают. (Пример скриншота: screencast.com/t/iTNSML3b)
если вы предоставите простую тестовую страницу с шагами для воспроизведения 1) посмотрите на фильтр «Y», нажмите кнопку «ShowX», чтобы отобразить столбец «X», «как получилось, что после нажатия на« ShowX »фильтр« Y »изменил свой размер. ... и т.д ... тогда можно будет попробовать и помочь (по крайней мере, для меня)
Это то, что я пытался сделать, когда случилась катастрофа ;-) Продолжу исследования ...
Даниэль: Я добился некоторого прогресса ... но не понимаю, почему range_number_slider не рендерится правильно ...
Исправлено большинство проблем. Вернусь с одной оставшейся проблемой ...
Ответы 1
Решены проблемы с Datatable (наиболее примечательно, что я не загрузил соответствующий .css для поддержки Bootstrap для надстроек), затем у меня возникла проблема с недостаточно широким элементом управления длиной страницы, чтобы полностью отобразить текст для «Все» - Выбор - это потребовало некоторых изменений в CSS, которые Аллан будет включать в свои загрузки. На всякий случай кто-нибудь еще попадет сюда:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
}
Затем у меня возникла проблема с вертикальным выравниванием элементов управления, окружающих стол, - для этого требовалась немного более развитая настройка dom, чем у меня:
"<'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>>"
Это должно стать значительно проще со следующими выпусками ...
Даже после того, как все это разобралось, проблема с yadcf осталась - но, похоже, это настоящая ошибка, поэтому я разместил проблема на GitHub.
jsfiddle на самом деле не работает ... также какова точная проблема с yadcf