How to correctly adjust columns for Jquery DataTables with ScrollX: true?

Question

I have a DataTables table. I want it to be able to scrollX in small screens, but for some reason I either have columns not adjusted with table header, when ScrollX: true, or columns ara adjusted correctly, but my Footer paginator stays on the same place, when ScrollX: false;
ScrollX: true

ScrollX: False

Here is my dataTables parameters:

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

Maybe i should add some classes to table to make it work?

Nimantha · Accepted Answer · 2021-11-06 08:48:56Z

I think you only need to add this rule in your css file:

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

Here is an example:

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>

Collectives™ on Stack Overflow

How to correctly adjust columns for Jquery DataTables with ScrollX: true?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related