如何通过Ajax（jQuery）重新加载Datatable

Question

I'm using Ajax for Crud operations in laravel 5.6 and I want to reload my table after insertion of data into the table.

This is how my table looks like without data:

After insertion, table looks like this:

Even after the data is added, when i search it doesn't consider the newly appended data in the table so my search result remains - no data available in the table.

The site.js

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

I tried a couple of things but it didn't work for me. The HTML for the table

<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>

Here is my Js function for the adding data into the table.

  $(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('');
            }
        }
    });
});

I tried using two different ways(in the js function for adding the asset) to solve the problem but they both failed and i don't know whether i did it wrongly.

First method

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

aTable.ajax().reload();

Second method

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

is there a better way of reloading the table to notice any newly added data? Any suggestions will be welcomed, thanks in advance.

Answer 1

Ok you first to tell your ajax request what you will receive so

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

now your return will be in separated blade file in your controller will return

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

now in your table.blade file add the 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

and finally add it to your table

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

I think that will work fine and clean and easy to modify

Answer 2

I think you are looking for .draw()

https://datatables.net/reference/api/draw()

In success of your ajax call, simply do:

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

Answer 3

There is method called

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