Question

我正在使用具有固定标头功能的数据表，使用materialize框架。这对于Web视图工作正常，但对于mob和tab视图我使用默认的materialize数据表设计，我需要禁用固定的头功能。

HTML代码：

<div id="tblContainer" class="material-table z-depth-3 hoverable">
  <table id="myTable" class="responsive-table highlight"></table>
</div>

JS代码：

我尝试使用＆＃34; 响应：真实＆＃34;但也没有工作。有没有办法实现这个目标？

$(document).ready(function() {

  var data2 = {
    "results": [{
        "Name": "test1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      },
      {
        "Name": "test 1",
        "Age": "23",
        "Amount": "234944",
        "Profit": "722636",
        "Loss": "6346326",
        "Address": "My test Address"
      }
    ]
  };


  $('#myTable').dataTable({
    data: data2.results,
    "order": [],
    "bSort": false,
    "bInfo": false,
    "paging": false,
    "searching": false,
    columns: [{
        data: 'Name',
        title: "Name"
      },
      {
        data: 'Amount',
        title: "Amount"
      },
      {
        data: 'Profit',
        title: "Profit"
      },
      {
        data: 'Loss',
        title: "Loss"
      },
      {
        data: 'Age',
        title: "Age"
      },
      {
        data: 'Address',
        title: "Address"
      },
      {
        data: 'Loss',
        title: "Loss"
      },
      {
        data: 'Age',
        title: "Age"
      },
      {
        data: 'Address',
        title: "Address"
      }
    ],
    "columnDefs": [{
        "width": "200px",
        "targets": [0]
      },
      {
        "width": "100px",
        "targets": [1]
      },
      {
        "width": "100px",
        "targets": [2]
      },
      {
        "width": "100px",
        "targets": [3, 6]
      },
      {
        "width": "100px",
        "targets": [4, 7]
      },
      {
        "width": "200px",
        "targets": [5, 8]
      }
    ],
    "fixedHeader": {
      header: true
    },
    "responsive": true
  });

});

Answer 1

也许如果你改变@media帮助你：

@media all and (max-width: 980px) {
 table.material-table thead tr th{
  width: auto !important;
 }
 table.material-table thead{
  min-width: 20% !important;
 }
}

Answer 2

$('#myTable').DataTable({
"fixedHeader": { 
      "header": false, 
      "footer": false 
      }
});

禁用数据表固定标头以实现物化响应设计

2 个答案: