jquery datatable 未将宽度应用于表

Posted 2023-05-09

技术标签:

【中文标题】jquery datatable 未将宽度应用于表【英文标题】：jquery datatable not applying width to the tables 【发布时间】：2021-12-08 09:47:26 【问题描述】：

我有一个 JSON，我正在引导选项卡内的 dataTable 中加载 JSON 数据。我为所有表格设置了一个通用宽度（即第 1 列宽度=20% 和第 2 列宽度=80%），但它适用于第一个选项卡内的第一个表格。诸如“宽度”之类的数据表初始化应该反映在选项卡内的表中。请帮忙！提前致谢！

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic Tabs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>

<div class="container">
  <ul class="nav nav-tabs myTab"> </ul>
  <div class="tab-content myTabContent"> </div>
  
  <h3>Selected Data:</h3>
  <table class="selectedTableData table table-bordered table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>TEXT</th>
        <th>ACTION</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
 </table>
  
</div>

<script>
$(function() 
    var tempJson = 
        "edi": 
            "name": "EDI",
            "data": [
                    "id": "1",
                    "text": "edi1"
                ,
                    "id": "2",
                    "text": "edi2"
                ,
                    "id": "3",
                    "text": "edi3"
                ,
                    "id": "4",
                    "text": "edi4"
                ,
                    "id": "5",
                    "text": "edi5"
                ]
        ,
        "api": 
            "name": "API",
            "data": [
                    "id": "01",
                    "text": "api1"
                ,
                    "id": "02",
                    "text": "api2"
                ,
                    "id": "03",
                    "text": "api3"
                ],

        ,
        "supply": 
            "name": "SUPPLY",
            "data": [
                    "id": "001",
                    "text": "supply1"
                ,
                    "id": "003",
                    "text": "supply3"
                ]
        ,
        "test": 
            "name": "TEST",
            "data": [
                    "id": "0001",
                    "text": "test1"
                ,
                    "id": "0002",
                    "text": "test2"
                ,
                    "id": "0003",
                    "text": "test3"
                ,
                    "id": "0004",
                    "text": "test4"
                ,
                    "id": "0005",
                    "text": "test5"
                ,
                    "id": "0006",
                    "text": "test6"
                ,
                    "id": "0007",
                    "text": "test7"
                ,
                    "id": "0008",
                    "text": "test8"
                ,
                    "id": "0009",
                    "text": "test9"
                ]
        
    ;

    var renderDatatable = function(tableId, data) 
        euffnDataTable = $("#" + tableId).DataTable(
            columns: [ data: "id", width: "20%",
                    render: function(data, type, row)  
                        if (type == 'display') 
                            return '<input type="checkbox" id="sel_' + row.id + '" class="editor-active template_checkbox" />';
                        
                        return data;
                    ,
                    className: 'selectFlow',
                ,
                 data: "text", width: "80%" ,
            ],
            data: data,
            dom: "Bfrtip",
            ordering: true,
            pageLength: 3,
            order: [ [0, "asc"] ],
            createdRow: function(row, data, dataIndex) 
                $(row).attr("template-id", data.id);
            
        );
    

    $.each(tempJson, function(k, v) 
        let tabList = '<li><a data-toggle="tab" href="#menu_' + k + '">' + v.name + '</a></li>';
        $(".myTab").append(tabList);
        let tabContent = '<div id="menu_' + k + '" class="tab-pane fade">' +
            '<table id="' + k + 'Table" class="bptable display table table-striped table-bordered table-sm lbp-table-grid-header order-column nowrap" style="width:100%; margin:0 !important;"><thead><tr><th>Select</th><th>Flow Name</th></tr></thead></table>' +
            '</div>';
        $(".myTabContent").append(tabContent);
        $(".myTab li:first-child").addClass("active");
        $(".myTabContent .tab-pane:first-child").addClass("in active");
        renderDatatable(k + "Table", v.data);
    );

    var rowArr = [];
    var table = $(".bptable").DataTable();
    $(".bptable").on("click", ".template_checkbox", function() 
        rowArr = [];
        $(this).closest("tr").toggleClass('selected');
        let rowData = table.rows(".selected").data();
        $.each(rowData, function(k, v) 
            rowArr.push(v);
        );        
        var uniqueRowArr = [...new Set(rowArr)];
        console.log(uniqueRowArr);
        $(".selectedTableData tbody").empty();
        $.each(uniqueRowArr, function(key, val) 
            $(".selectedTableData tbody").append('<tr selected-row-id="' + val.id + '"> <td>' + val.id + '</td> <td>' + val.text + '</td> <td><a class="removeData" href="javascript:;"><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
        );
    );

    $(".selectedTableData").on("click", ".removeData", function() 
        var selectedRowId = $(this).closest("tr").attr("selected-row-id");
        $(".bptable tbody tr").each(function() 
            var templateId = $(this).attr("template-id");
            if (selectedRowId == templateId) 
                $(this).removeClass("selected");
                $(this).find(".template_checkbox").prop('checked', false);
            
        );
        $(this).closest("tr").remove();
    );
    
    // TAB click event
    
    $('.myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
        //console.log("tab clicked!");
        $(".bptable").DataTable().draw();
        
    );
    
    
);
</script>

</body>
</html>

【问题讨论】：

【参考方案1】：

数据表将根据您提供的百分比计算像素宽度。

检查第一个选项卡表中的第一列：在 sn-p 中它是 style="width: 89px;" 上的 th。当一个元素具有style='width:.. 并且在标记/js 中没有这方面的证据时，这意味着一些 js 正在计算这个添加直接在元素上设置它。

实际宽度值是根据容器宽度计算的 - 因为容器（选项卡）在呈现表格时不可见，所以宽度为 0 - 因此数据表不会在它们获得时为它们提供计算出的宽度默认值为（100 / 列数）（2 列为 50%）。

如果您删除列定义宽度 (width: "20%",)，那么您可以通过 css 设置宽度：

.tab-pane .dataTable td:first-child  width: 20%; 
.tab-pane .dataTable td:last-child  width: 80%;

（您可能更喜欢对特定选项卡使用更具体的选择器，或者根据要求对每个选项卡/表格使用不同的选择器）

更新了sn-p：

$(function() 
  var tempJson = 
    "edi": 
      "name": "EDI",
      "data": [
        "id": "1",
        "text": "edi1"
      , 
        "id": "2",
        "text": "edi2"
      , 
        "id": "3",
        "text": "edi3"
      , 
        "id": "4",
        "text": "edi4"
      , 
        "id": "5",
        "text": "edi5"
      ]
    ,
    "api": 
      "name": "API",
      "data": [
        "id": "01",
        "text": "api1"
      , 
        "id": "02",
        "text": "api2"
      , 
        "id": "03",
        "text": "api3"
      ],

    ,
    "supply": 
      "name": "SUPPLY",
      "data": [
        "id": "001",
        "text": "supply1"
      , 
        "id": "003",
        "text": "supply3"
      ]
    ,
    "test": 
      "name": "TEST",
      "data": [
        "id": "0001",
        "text": "test1"
      , 
        "id": "0002",
        "text": "test2"
      , 
        "id": "0003",
        "text": "test3"
      , 
        "id": "0004",
        "text": "test4"
      , 
        "id": "0005",
        "text": "test5"
      , 
        "id": "0006",
        "text": "test6"
      , 
        "id": "0007",
        "text": "test7"
      , 
        "id": "0008",
        "text": "test8"
      , 
        "id": "0009",
        "text": "test9"
      ]
    
  ;

  var renderDatatable = function(tableId, data) 
    euffnDataTable = $("#" + tableId).DataTable(
      columns: [
          data: "id",
          render: function(data, type, row) 
            if (type == 'display') 
              return '<input type="checkbox" id="sel_' + row.id + '" class="editor-active template_checkbox" />';
            
            return data;
          ,
          className: 'selectFlow',
        ,
        
          data: "text",
        ,
      ],
      data: data,
      dom: "Bfrtip",
      ordering: true,
      pageLength: 3,
      order: [
        [0, "asc"]
      ],
      createdRow: function(row, data, dataIndex) 
        $(row).attr("template-id", data.id);
      
    );
  

  $.each(tempJson, function(k, v) 
    let tabList = '<li><a data-toggle="tab" href="#menu_' + k + '">' + v.name + '</a></li>';
    $(".myTab").append(tabList);
    let tabContent = '<div id="menu_' + k + '" class="tab-pane fade">' +
      '<table id="' + k + 'Table" class="bptable display table table-striped table-bordered table-sm lbp-table-grid-header order-column nowrap" style="width:100%; margin:0 !important;"><thead><tr><th>Select</th><th>Flow Name</th></tr></thead></table>' +
      '</div>';
    $(".myTabContent").append(tabContent);
    $(".myTab li:first-child").addClass("active");
    $(".myTabContent .tab-pane:first-child").addClass("in active");
    renderDatatable(k + "Table", v.data);
  );

  var rowArr = [];
  var table = $(".bptable").DataTable();
  $(".bptable").on("click", ".template_checkbox", function() 
    rowArr = [];
    $(this).closest("tr").toggleClass('selected');
    let rowData = table.rows(".selected").data();
    $.each(rowData, function(k, v) 
      rowArr.push(v);
    );
    var uniqueRowArr = [...new Set(rowArr)];
    console.log(uniqueRowArr);
    $(".selectedTableData tbody").empty();
    $.each(uniqueRowArr, function(key, val) 
      $(".selectedTableData tbody").append('<tr selected-row-id="' + val.id + '"> <td>' + val.id + '</td> <td>' + val.text + '</td> <td><a class="removeData" href="javascript:;"><span class="glyphicon glyphicon-remove"></span></a></td></tr>');
    );
  );

  $(".selectedTableData").on("click", ".removeData", function() 
    var selectedRowId = $(this).closest("tr").attr("selected-row-id");
    $(".bptable tbody tr").each(function() 
      var templateId = $(this).attr("template-id");
      if (selectedRowId == templateId) 
        $(this).removeClass("selected");
        $(this).find(".template_checkbox").prop('checked', false);
      
    );
    $(this).closest("tr").remove();
  );

  // TAB click event

  $('.myTab a[data-toggle="tab"]').on('shown.bs.tab', function(e) 
    //console.log("tab clicked!");
    $(".bptable").DataTable().draw();

  );


);

.dataTable td:first-child  width: 20%; 
.dataTable td:last-child  width: 80%;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
</head>

<div class="container">
  <ul class="nav nav-tabs myTab"> </ul>
  <div class="tab-content myTabContent"> </div>

  <h3>Selected Data:</h3>
  <table class="selectedTableData table table-bordered table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>TEXT</th>
        <th>ACTION</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</div>

【讨论】：

感谢您的快速解决，但我想知道如何为动态创建的列应用宽度。例如，如果我们不知道要向表中添加多少列，我们如何应用宽度？

以上是关于jquery datatable 未将宽度应用于表的主要内容，如果未能解决你的问题，请参考以下文章

datatable jquery - 表头宽度与正文宽度不对齐

JQuery DataTable 插件宽度问题

jQuery dataTables：基于字符串的过滤器

jQuery DataTables：控制表格宽度

工具栏中的 ConstraintLayout 未将 match_parent 应用于宽度或高度

jquery datatable - 表头宽度与Laravel中的正文宽度不对齐