如何通过 Ajax (jQuery) 重新加载数据表

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();