Что вызывает проблемы с компоновкой моего Datatable? - PullRequest
Новая
       11

Что вызывает проблемы с компоновкой моего Datatable?

0 голосов
/ 28 мая 2018

Я создаю приложение, в котором я хочу использовать Datatables с различными плагинами, и я заметил некоторые странные проблемы с компоновкой.Поэтому я попытался создать репро.И когда я работал над этим, возникали новые проблемы, и я даже не смог их решить.Итак, вот я с текущим состоянием моей скрипки

Я понятия не имею, что вызывает эти проблемы.Я приложил немного кода (потому что это требуется, но с сокращенными данными).Проблемы, с которыми я в настоящее время борюсь:

  • yadcf - неполные фильтры ...
  • дефекты нижнего колонтитула: отсутствует селектор длины страницы, отсутствуют элементы управления поиском.Всякий раз, когда я видел это в прошлом, были некоторые ошибки JS (обычно с моим кодом), но на этот раз я ничего не вижу в консоли.

Update1 : Теперь мне удалось избавиться от изменения размера column1.range_number_slider для 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/

1 Ответ

0 голосов
/ 02 июня 2018

Решены проблемы с Datatable (наиболее примечательно, что я не загрузил соответствующий .css для поддержки Bootstrap для аддонов), затем у меня возникла проблема с недостаточно широким контролем длины страницы, чтобы полностью отобразить текст для "All "-Selection - это потребовало некоторых изменений в 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.

...