Question

我正在使用数据表。但是在移动视图中，该表没有响应。我尝试使用响应表类，但没有帮助。有解决办法吗？

我希望我的桌子看起来像这样。并且该表应在移动视图下响应。

        <div class="card-body">
          <div class="table-responsive" id="employee_table">
            <table id="dataTable" class="stripe hover row-border order-column" cellspacing="0">
              <thead class="text-center">
                <tr>
                  <th>SN</th>
                  <th>Party</th>
                  <th>Net Rate</th>>
                  <th>Scrap</th>
                </tr>
              </thead>
              <tbody>
                <?php

                  if (isset($_GET['employee_insert'])) {

                    fetchTableData('employee_insert');
                    sessionForModal('employee_insert');

                  } elseif (isset($_GET['employee_tap'])) {

                    fetchTableData('employee_tap');
                    sessionForModal('employee_tap');

                  } else {

                    fetchTableData('employee_insert');
                    sessionForModal('employee_insert');
                  }
                ?>
              </tbody>
            </table>
          </div>
        </div>

  $(document).ready( function () {
      $('#dataTable').DataTable();
  } );


  $('#dataTable').DataTable( {
    "lengthMenu": [[-1, 10 , 100], ["All", 10, 100]]
  } );

</script>

Answer 1

使用下面的代码

$('#dataTable').DataTable( {
   "responsive": true
} );

Answer 2

使用以下代码，

$('#dataTable').DataTable( {
   "responsive": true,
   "lengthMenu": [[-1, 10 , 100], ["All", 10, 100]]
} );

Answer 3

除了对数据表的响应扩展之外，您还必须添加

 

 $(document).ready( function () {
      $('#dataTable').DataTable({
       responsive:true
});
  } );

<table id="dataTable" class="table dt-responsive responsive" cellspacing="0">

DataTables调整大小时的响应问题

3 个答案: