laravel无法在ajax刀片页面中加载数据表js

时间:2018-12-28 07:21:30

标签: php jquery laravel-5 datatables

我需要过滤数据表对象,因为我正在使用数据表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);

我希望输出的数据表经过过滤。

0 个答案:

没有答案