是什么导致了我的数据表的布局问题?

What causes the layout problems of my Datatable?

我正在构建一个应用程序,我想在其中使用 Datatables 和各种插件,我发现了一些奇怪的布局问题。所以我试图建立一个复制品。在努力的过程中,出现了新的问题,我什至没有解决这些问题。 所以这里是我 fiddle

的当前状态

我不知道是什么导致了这些问题。我附上了一些代码(因为它是必需的,但数据减少了)。我目前遇到的问题:

Update1:我现在设法摆脱了 column1-resizing。 range_number_sliderfor yadcf 无法正确呈现 - 我是否缺少资源?? 已更新 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/

解决了数据table的问题(大多数没有table我没有加载适当的.css来支持插件Bootstrap),然后我pagelength-control 有一个问题,它不够宽,无法完全显示 "All"-Selection 的文本 - 这需要对 Allan 将包含在他的下载中的 CSS 进行一些更改。 以防万一其他人点击这个:

  div.dataTables_wrapper div.dataTables_length select {
    width: auto;
  }

然后我遇到了围绕 table 的控件的垂直对齐问题 - 需要比我的 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.

上发布了一个 issue