laravel Невозможно загрузить datatable js на странице лезвия ajax

Question

Мне нужно отфильтровать объект данных для этого я использую датированный JQuery.Но он не работает

Я использую версию Laravel 5.6, я добавил новый блейд для моего фильтра данных.но это не фильтрует датируемые результаты.

Я получаю датируемый результат через AJAX.Требуется решение для фильтрации.

ajax blade code:
<div class="container-fluid page-body-wrapper">
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Data table</h4>
              <div class="row">
                <div class="col-12">
                  <div class="table-responsive">
                    <table id="order-listing" class="table">
                      <thead>
                        <tr>
                            <th>Name</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>SKU</th>
                            <th>Weight</th>
                            <th>Status</th>
                            <th>Seller Price</th>
                            <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($result as $data)
                        <tr>
                            <td>{{ $data->name }}</td>
                            <td>{{ $data->qty }}</td>
                            <td>{{ $data->price }}</td>
                            <td>{{ $data->sku }}</td>
                            <td>{{ $data->weight }}</td>
                            <td>{{ $data->status }}</td>
                            <td>{{ $data->seller_price }}</td>
                            <td>      
                            <a class="btn btn-primary" href="{{ route('inventory.edit', array('id' => $data->id, 'sku' =>$data->sku )) }}">Edit</a>
                            </td>
                        </tr>
                        @endforeach

                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->

      </div>
      <!-- main-panel ends -->
    </div>

jquery code:

(function($) {
  'use strict';
  $(function() {
    $('#order-listing').DataTable({
      "aLengthMenu": [
        [5, 10, 15, -1],
        [5, 10, 15, "All"]
      ],
      "iDisplayLength": 10,
      "language": {
        search: ""
      }
    });
    $('#order-listing').each(function() {
      var datatable = $(this);
      // SEARCH - Add the placeholder for Search and Turn this into in-line form control
      var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
      search_input.attr('placeholder', 'Search');
      search_input.removeClass('form-control-sm');
      // LENGTH - Inline-Form control
      var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
      length_sel.removeClass('form-control-sm');
    });
  });
})(jQuery);

Ожидается вывод с отфильтрованными данными.