Laravel DataTable View

@php
use App\Utility;
$utility = new Utility();
@endphp
@extends('layouts.app')
@section('title', $pageTitle)
@section('content')

<style>
    #action-cell a{
        /*font-size: 12pt;*/
        text-align: center;
        /*display:inline-flex;*/
    }
    .table > thead > tr > th {

        font-size: inherit;

    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-content">
                <h4 class="card-title">{{ $pageTitle }}</h4>
                @if ($message = Session::get('success'))
                    <div class="alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                @endif

                <a href="{{ URL::to($route.'/create') }}" class="btn btn-primary btn-sm">{{ $createButtonText }}<div class="ripple-container"></div></a>
                <table class="table table-bordered data-table table-responsive">
                    <thead class="text-primary">
                    <tr>
                        <th width="50">No</th>
                        <th>Date</th>
                        <th>Customer</th>
                        <th>Phone</th>
                        <th>Airline</th>
                        <th>Fair Type</th>
                        <th>Fair Price</th>
                        <th>Departure</th>
                        <th>Arrival</th>
{{--                        <th>Cabin Class</th>--}}
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="purchaseViewModal" tabindex="-1" role="dialog" aria-labelledby="purchaseViewModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Purchase Info</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
            </div>
        </div>
    </div>
</div>
<script>
  function showPurchaseViewModal(url){
      $.get( url, function( data ) {
          $( "#purchaseViewModal .modal-body" ).html( data );
         // alert( "Load was performed." );
      });
      $('#purchaseViewModal').modal('show');
  }

  $(function () {
      var table = $('.data-table').DataTable({
          stateSave: true,
          responsive: true,
          processing: true,
          serverSide: true,
          order : [0,'desc'],
          ajax: "{{ URL::to($route.'') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'booking_date', name: 'booking_date'},
              {data: 'CustomerFullName', name: 'CustomerFullName'},
              {data: 'phone1', name: 'phone1'},
              {data: 'AirlineName', name: 'AirlineName'},
              {data: 'fairFamilyName', name: 'fairFamilyName'},
              {data: 'fare_price', name: 'fare_price'},
              {data: 'fromName', name: 'fromName'},
              {data: 'toName', name: 'toName'},

              // {data: 'cabin_class', name: 'cabin_class'},
              // {data: 'Cancel', name: 'Cancel'},
               {data: 'bookingStatus', name: 'bookingStatus'},

              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
  });
</script>

@endsection