CODEWITHSUNDEEP
jqueryajaxdatatables
sdot257
sdot257

Reputation: 10366

Datatables doesn't load properly using Ajax load

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>

Upvotes: 0

Views: 970

Answers (1)

JC Sama
JC Sama

Reputation: 2204

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']]
               });
           }
        );
    });
});

Upvotes: 3

Related Questions