CODEWITHSUNDEEP
phphtmlcssdatatables
Dipanshu Chaubey
Dipanshu Chaubey

Reputation: 890

DataTables Responsive issue on resize

I'm using datatable. But on mobile view, the table is not responsive. I tried using reponsive-table class but it didn't help. Any solution?

I want my table to look like this.

I want my table to look like this. and the table should be responsive on mobile view.

        <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>

Upvotes: 1

Views: 989

Answers (3)

Siddhinath
Siddhinath

Reputation: 111

Use the code below

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

Upvotes: 1

shubham.k
shubham.k

Reputation: 36

In addition to the responsive extention for datatables you will have to add

 

 $(document).ready( function () {
      $('#dataTable').DataTable({
       responsive:true
});
  } );
<table id="dataTable" class="table dt-responsive responsive" cellspacing="0">

Upvotes: 0

Kmg Kumar
Kmg Kumar

Reputation: 616

Use the below code,

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

Upvotes: 0

Related Questions