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

问题描述

我有一个DataTables表。我希望它能够在小屏幕上滚动X，但是由于某些原因，我要么没有使用表头调整列（当ScrollX：true时），要么列ara调整正确，但是我的页脚分页器停留在同一位置，当ScrollX：假；
ScrollX：true

ScrollX：错误

这是我的dataTables参数：

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

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

解决方法

我认为您只需要在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","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",meta) {
                
                return '<span class="info">' + data + '</span>';
          }
      },{ 
          data: 'Status',meta) {
                
            if(data == 1)
                return '<span class="info">Active</span>';
            else
              return '<span class="info" style="color: red">Inactive</span>';
         }
      },{ 
          data: 'Created',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",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>

快乐编码！