Datatables doesn't load properly using Ajax load

Question

I'm loading a child page using an ajax call via a div. Everything works fine, the data loads just fine except datatables doesn't render the dropdown and search fields. IF I embed the code from the child page into the main page where the <div id="output"></div> is, it renders correctly.

Main page

<div id="output"></div>

JS script on main page

$(document).ready(function() {
    $('#branch_name').on("change", function() {
        $('#output').load('/svnlogs/logs',{branch_name: $(this).val()});
    });

    $('table#dtable-1').dataTable( {
         aaSorting:[], 'searching': true,
        'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']]
    });
});

Child page that gets loaded into the div

<section id="tables">
    <div class="sub-header"><h2>Subversion Logs</h2></div>      
    <table id="dtable-1" class="table table-striped">
        <thead>
            <tr>
                <th>Revision</th>
                <th>Tags</th>
                <th>Commit Message</th>
            </tr>
        </thead>
        <tbody>
            # my php data
        </tbody>
    </table>
</section>

JC Sama · Accepted Answer · 2015-02-27 17:34:44Z

3

I think because the datatable plugin is executed before the content was loaded, so you can try with a callback function as following :

$(document).ready(function() {
    $('#branch_name').on("change", function() {
        $('#output').load(
           '/svnlogs/logs',
           { branch_name: $(this).val() },
           function(){
               $('table#dtable-1').dataTable( {
                  aaSorting:[], 'searching': true,
                 'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']]
               });
           }
        );
    });
});

answered Feb 27, 2015 at 17:34

JC Sama

2,2041 gold badge14 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Datatables doesn't load properly using Ajax load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related