jQuery DataTables on live tables from PHP script

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

Baylor Rae' · Accepted Answer · 2012-07-29 04:51:55Z

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

answered Jul 29, 2012 at 4:51

Baylor Rae'

4,01023 silver badges40 bronze badges

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

1 Comment

Rui Seixas Monteiro Over a year ago

Thank you, I realize that to after a while. Thanks. ... $.get('simple_table.php', {}, function(html_table) { content.html(html_table); $('table.table_type').dataTable( { bRetrieve: true } ); } ); ...

Collectives™ on Stack Overflow

jQuery DataTables on live tables from PHP script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related