You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.29 07:44:02