jQuery DataTables on live tables from PHP script - php

Question

I'm having a problem with the implementation of DataTables, I simple can't make it work in a returned table from a PHP script. Suppose this simple PHP script named simple_table.php:
<?php
echo '
<table class="table_type">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>';
?>
Now I also have the next very simple jQuery script declared after the </body> tag in the hipotetic html file:
$(document).ready( function () {
$('table.table_type').dataTable();
} );
$('div.push_button li').click(function() {
var content = $(this).closest('div').children('div.content');
$.get('simple_table.php', {}, function(html_table) {
content.html(html_table);
} );
} );
What is needed to be made for this simple example to work and keeping in it simple? The problem is that there is no solution for this useful scenario of a dynamic table made by a so simple script!
Well, maybe you have to have a preexisting <table> and only yhen be able to filled up the respective <tr>...

Answer 1

The problem is because you are running .dataTable() before the page has the element table.table_type. Instead of calling .dataTable() when the page loads, you need to run it once the table has been added to your <div>.
$('div.push_button li').click(function() {
var content = $(this).closest('div').children('div.content');
$.get('simple_table.php', {}, function(html_table) {
content.html(html_table);
content.find('table').dataTable();
} );
} );