jquery - 如何使用 ScrollX 正确调整 Jquery DataTables 的列：true？

Question

我有一个 DataTables 表。我希望它能够在小屏幕上滚动 X，但由于某种原因，当 ScrollX：true 或列 ara 调整正确时，我的列未使用表头调整，但当 ScrollX：错误的;
ScrollX: true ScrollX: False 这是我的 dataTables 参数：

var table = $("#data-category-table").DataTable({
                "responsive": false,
                "pagingType": "full",
                "ordering": false,
                "pageLength": 15,
                "scrollX": false,
}),

也许我应该在表中添加一些类以使其工作？

标签： jquerydatatables

Answer 1

我认为您只需要在您的 css 文件中添加此规则：

div.dataTables_wrapper {
   width: 770px;
   margin: 0 auto;
}

这是一个例子：

var jsonData = [ { "Name": "Agreements and Arrangements", "Data": "Details of business agreements and arrangements, representatives, etc.", "Category": "No", "UsedPA": "1", "Status": 1, "Created": "John Doe", "Updated": "John Doe" },
{ "Name": "Other Value", "Data": "XYZ", "Category": "No", "UsedPA": "No", "Status": 0, "Created": "Jane Doe", "Updated": "John Doe" } ];
  
$(document).ready(function() {
    $('#example').DataTable({
            "order": [[1, 'asc']],
            "autoWidth": false,
            "data": jsonData,
        "scrollX": true,
   columns: [
        { 
         data: null,
         orderable: false,
         searchable: false,
         render: function(data, type, row, meta) {
                return '<input type="checkbox">';
         }
      },
      { 
          data: 'Name',
          width: '50px'
      },
      { 
            data: 'Data',
          width: "50px"
      },
      { 
          data: 'Category',
          width: "95px"
      },
      { 
          data: 'UsedPA',
          width: "115px",
          render: function(data, type, row, meta) {
                
                return '<span class="info">' + data + '</span>';
          }
      },
      { 
          data: 'Status',
          width: "115px",
          render: function(data, type, row, meta) {
                
            if(data == 1)
                return '<span class="info">Active</span>';
            else
              return '<span class="info" style="color: red">Inactive</span>';
         }
      },
      { 
          data: 'Created',
          width: "115px",
          render: function(data, type, row, meta) {
          
             return '<table class="user"><tr><td rowspan="2"><img src="https://i.imgur.com/IBYEgpJ.png"></td>' +
                            '<td>' + data + '</td></tr>' +
                    '<tr><td>07.08.2020</td></tr></table>';
          }
      },
      { 
         data: 'Updated',
          width: "75px",
          render: function(data, type, row, meta) {
          
             return '<table class="user"><tr><td rowspan="2"><img src="https://i.imgur.com/IBYEgpJ.png"></td>' +
                            '<td>' + data + '</td></tr>' +
                    '<tr><td>07.08.2020</td></tr></table>';
          }
      }
     ]
    });
});

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}

.table td, .table th {
    vertical-align: middle;
}

.info {
  border: 1px solid black;
  padding: 3px;
  border-radius: 25px;
  text-align: center;
  background-color: #f7f7fa;
  display: block;
  font-size: 10px;
  width: 100px;
}

table.user tbody tr {
  background-color: transparent  !important;
}

table.user tbody td {  
  border: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<table id="example" class="table table-bordered table-striped" style="width:100%">
  <thead>
    <tr>
      <th><input type="checkbox"></th>
      <th>Name</th>
      <th>Data</th>
      <th style="min-width: 130px;">Special Category</th>
      <th style="min-width: 110px;">Used in PA</th>
      <th>Status</th>
      <th>Created</th>
      <th>Updated</th>
    </tr>
  </thead>
</table>