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

如何通过Ajax（jQuery）重新加载数据表

3 个答案: