'Data table initialize after table body replace (ajax)

I have a datatable it have a search box (date range filter) once i click the search button table body replace according to the filter(ajax).

my problem is i cant initialize table after ajax success.

HTML

<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
       width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Arrivals</th>
        <th>Departures</th>
        <th>Occupied</th>
        <th>Available</th>
        <th>Occupancy</th>
    </tr>
    </thead>
    <tbody id="occupancyBody">

    </tbody>
</table>

Ajax

        type: 'POST',
        url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
        data: "action=filterOc&" + url_data,
        success: function (resultData) {
            $('#occupancyBody').html(resultData);
            $('#occupancy').dataTable();
        }
    });

sample screenshot

javascriptphpjqueryajaxdatatable


Solution 1:[1]

You can use below mentioned code to reinitialize table after ajax call.

While defining datatable, you can store in a variable.

var myTable =  $('#occupancy').DataTable({ // all your configuration });

Now after ajax call you can call below line.

myTable.ajax.reload();

also remove this line in ajax:success function.

$('#occupancy').dataTable();

Let me know if it not works.

Solution 2:[2]

Please check here

$(document).ready(function(){
  var table = $('#occupancy').dataTable();
  $.ajax({
      type: 'POST',
      url: "../system/user/modules/controller.php",
      data: "action=filterOc&",
      success: function (resultData) {
         $('#occupancyBody').html(resultData);
         table.ajax.reload();
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>

<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
       width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Arrivals</th>
        <th>Departures</th>
        <th>Occupied</th>
        <th>Available</th>
        <th>Occupancy</th>
    </tr>
    </thead>
    <tbody id="occupancyBody">

    </tbody>
</table>

Solution 3:[3]

The ajax.reload() API function should only work if you included the ajax option in Datatable's initialization (see here).

In this case, I'd recommend to add destroy:true to the initialization of Datatables, something like this:

$('#occupancy').DataTable({ destroy:true})

This would allow you to re-create the table every time the ajax call is successful.

Solution 4:[4]

hi i guess you selected wrong body id :

$('#occupancyBody').html(resultData);

but in your html :

 <tbody id="dailyAct">

hope it's help,

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shyam Shingadiya
Solution 2 Shyam Shingadiya
Solution 3 Sebastianb
Solution 4 kanzari

Related Questions