DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
  <table id='empTable' class="table table-sm  dt-responsive nowrap" style="width:100%">
        <thead class="thead-dark">
          <tr>
            <th data-priority="1" scope="col">Date</th>
            <th data-priority="2" scope="col">Begin</th>
            <th data-priority="3" scope="col">PBegin</th>
            <th data-priority="3" scope="col">PEnd</th>
            <th data-priority="2" scope="col">End</th>
          </tr>
        </thead>
      </table>

JavaScript

// Table
        var dataTable = $('#empTable').DataTable({
          dom: 'Brtip',
          responsive: true,
          fixedHeader: true,
          processing: false,
          serverSide: true,
          serverMethod: 'post',
          order: [
            [0, "desc"]
          ],
          ajax: {
            url: 'requirements/ajax.php',
            data: function(data) {
              // Read values
              var from_date = $('#search_fromdate').val();
              var to_date = $('#search_todate').val();
              // Append to data
              data.searchByFromdate = from_date.split(' to ')[0];
              data.searchByTodate = from_date.split(' to ')[1];
            }
          },
          columnDefs: [{
              targets: '_all'
            },
            {
              className: 'empTable'
            },
          ],
          columns: [{
              data: 'date'
            },
            {
              data: 'work_begin'
            },
            {
              data: 'pause_begin'
            },
            {
              data: 'pause_end'
            },
            {
              data: 'work_end'
            },
          ] 
         
        });