jQuery .load() function not working with DataTables?

Question

I am attempting to use Datatables with an external html Table. The below code works just fine:

<table id="myTable" class="table table-striped" >  
  <thead>  
    <tr>  
      <th>ENO</th>  
      <th>EMPName</th>  
      <th>Country</th>  
      <th>Salary</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>001</td>  
      <td>Anusha</td>  
      <td>India</td>  
      <td>10000</td>  
    </tr>   
  </tbody>  
</table>

However, if I do so like this:

<div class="container">
  <div id="includedContent"></div>
</div>

With this as the script:

$(function(){
  $("#includedContent").load("bigtableofdata.html");
});

The system no longer works. I cannot seem to figure this out, and I'm wondering if I need to specially format it in some way for this to work. Any help much appreciated.

charlietfl · Accepted Answer · 2019-11-03 00:48:44Z

1

You will need to initialize the plugin in complete callback of load()

$("#includedContent").load("bigtableofdata.html", function(){
  /// new html exists now
  $('#myTable').DataTable(/*options*/)
});

Note there are also built in ajax options configurations in DataTables API that are a more common approach to ajax loading the data

answered Nov 3, 2019 at 0:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.Stevens Over a year ago

Thank you very much, would you be able to point me in the direction of where to find these Ajax options? I'm new to all this. Thanks.

charlietfl Over a year ago

This approach will work. The datatables documentation has ajax examples you can follow. All the examples show runnable code

Collectives™ on Stack Overflow

jQuery .load() function not working with DataTables?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related