首页 > 解决方案 > laravel无法在ajax刀片页面中加载数据表js

问题描述

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

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

标签: phpjquerylaravel-5datatables

解决方案


推荐阅读