DataTables Отзывчивый вопрос при изменении размера

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

В дополнение к отзывчивому расширению для таблиц данных вам нужно будет добавить

 

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

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

Answer 2

Используйте код ниже

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

Answer 3

Используйте приведенный ниже код,

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