如何通過Ajax（jQuery）重新加載Datatable

Question

我在laravel 5.6中使用Ajax進行Crud操作，我想在將數據插入表后重新加載表。

這是沒有數據時我的表的樣子：

插入后，表如下所示：

即使在添加數據之后，當我搜索它時，它也不會考慮表中新添加的數據，因此我的搜索結果仍然存在-表中沒有可用數據。

site.js

$(".complete-table").each(function(){
    $(this).DataTable( {
        dom: 'Bfrtip',
        buttons: [
            // 'copyHtml5',
            // 'excelHtml5',
            // 'csvHtml5',
            // 'pdfHtml5'
        ]
    } );
});

我嘗試了幾件事，但是對我來說不起作用。 表格的HTML

<table id="asset-{{ $asset_receive->asset_received_id }}" class="complete-table table toggle-circle table-hover" data-page-size="15">
    <thead>
        <tr>
            <th> Tag ID</th>
            <th> Asset Category </th>
            <th> Manufacturer</th>
            <th> Serial Number </th>
            <th> Model Number </th>
            <th> Colour</th>
         </tr>
      </thead>                                                      

  <tbody id="asset-table-{{ $asset_receive->asset_received_id }}">
  @foreach($assets->where('asset_received_id',  '=', $asset_receive->asset_received_id) as $asset)
      <tr>
          <td>{{ $asset->tag_id}}</td>
          <td>{{ $asset->asset_categories['category']}}</td>
          <td>{{ $asset->manufacturers['manufacturer']}}</td>
          <td>{{ $asset->serial_number}}</td>
          <td>{{ $asset->model_number}}</td>
          <td>{{$asset->colour}}</td>
      </tr>
  @endforeach
  </tbody>

這是我的Js函數，用於將數據添加到表中。

  $(document).on('click', 'button.submit-asset-received', function() {
    assetReceivedId = $(this).data('asset-received-id');
    assetFormId = 'form#form-assets-record-' + assetReceivedId;
    $('.error').addClass('hidden');
    $.ajax({
        type: 'post',
        url: '/addAsset',
        indexForm: assetFormId,
        indexValue: $(assetFormId + ' input[name=asset_a_category_name]').val(),
        indexManufacturer: $(assetFormId + ' select[name=a_manufacturer_id] option:selected').text(),
        data: {
            '_token': $(assetFormId + ' input[name=_token]').val(),
            'tag_id': $(assetFormId + ' input[name=tag_id]').val(),
            'asset_category_id': $(assetFormId + ' input[name=asset_a_category_id]').val(),
            'manufacturer_id': $(assetFormId + ' select[name=a_manufacturer_id] option:selected').val(),
            'serial_number': $(assetFormId + ' input[name=serial_number]').val(),
            'model_number': $(assetFormId + ' input[name=model_number]').val(),
            'colour': $(assetFormId + ' input[name=colour]').val(),
            'asset_received_id': assetReceivedId,
        },
        success: function(data) {
            if((data.errors)){
                var errors = data.errors;
                $.each(errors, function (key, value) {
                    $('input[name=' + key + ']').next('p').removeClass('hidden');
                    $('input[name=' + key + ']').next('p').text(value);
                    if(key === 'manufacturer_id'){
                        $('select[name=a_manufacturer_id]').next('p').removeClass('hidden');
                        $('select[name=a_manufacturer_id]').next('p').text(value);
                    }
                });
            }else{
                $('#asset-table-'+data.assets.asset_received_id).append("<tr>"+
                    // "<td>" + data.asset_category_id + "</td>"+
                    "<td>" + data.assets.tag_id + "</td>"+
                    "<td>" + this.indexValue + "</td>"+
                    "<td>" + this.indexManufacturer +"</td>"+
                    "<td>" + data.assets.serial_number + "</td>"+
                    "<td>" + data.assets.model_number + "</td>"+
                    "<td>" + data.assets.colour + "</td>"+
                    "</tr>");

                var aTable = $('#asset-'+data.assets.asset_received_id).parent('table').dataTable();
                aTable.ajax.reload();

                $('#unassigned').html(data.view_1);
                if(data.asset_received.qty_received != data.asset_received.qty_recorded){
                    $("form#form-assets-record-" + data.assets.asset_received_id).show();
                }else{
                    $("form#form-assets-record-" + data.assets.asset_received_id).hide();
                }
                //increase quantity recorded of this asset by taking current value and increasing by one
                var currentRecordedQuantity = parseInt($("td#qty_recorded_"+data.assets.asset_received_id).text());
                console.log(currentRecordedQuantity);
                $("td#qty_recorded_"+data.assets.asset_received_id).text(currentRecordedQuantity+1);
                $('input[name=tag_id]').val('');
                $('select[name=a_manufacturer_id]').val('');
                $('input[name=serial_number]').val('');
                $('input[name=model_number]').val('');
                $('input[name=colour]').val('');
            }
        }
    });
});

我嘗試使用兩種不同的方法（在用於添加資產的js函數中）解決問題，但它們均失敗了，我不知道我是否做錯了。

第一種方法

var aTable = $('#asset-table-'+data.assets.asset_received_id).parent('table').dataTable();

aTable.ajax（）。reload（）;

第二種方法

var aTable = $('#asset-table-'+data.assets.asset_received_id).parent('table').dataTable();
aTable.fnDraw();

有沒有更好的方式重新加載表以注意到任何新添加的數據？ 任何建議都將受到歡迎，在此先感謝。

Answer 1

好吧，您先告訴您的ajax請求您將收到什么，

 $.ajax({
    type: 'post',
    url: '/addAsset',
    indexForm: assetFormId,
    dataType:'html',

現在您的退貨將在控制器的單獨刀片文件中退回

return view('table',compact('data_that_you_fetched_form'));

現在在您的table.blade文件中添加html

 @foreach($data_that_you_fetched_form as $asset)
  <tr>
      <td>{{ $asset->tag_id}}</td>
      <td>{{ $asset->asset_categories['category']}}</td>
      <td>{{ $asset->manufacturers['manufacturer']}}</td>
      <td>{{ $asset->serial_number}}</td>
      <td>{{ $asset->model_number}}</td>
      <td>{{$asset->colour}}</td>
  </tr>

@endforeach

最后將其添加到您的表中

success: function(data) {
   $(asset-table-'{{ $asset_receive->asset_received_id }}').html(data);
 }

我認為這樣可以正常工作，並且易於修改

Answer 2

我認為您正在尋找.draw（）

https://datatables.net/reference/api/draw（）

要成功執行ajax調用，只需執行以下操作：

var table = $('.complete-table').DataTable();
table.draw();

Answer 3

有叫的方法

var table = $('.complete-table').DataTable();
table.ajax.reload();