使用 Ajax 加载无法正确加载数据表答案

【问题标题】：Datatables doesn't load properly using Ajax load使用 Ajax 加载无法正确加载数据表
【发布时间】：2015-02-27 17:16:16
【问题描述】：

我正在通过div 使用ajax 调用加载子页面。一切正常，数据加载正常，除了数据表不呈现下拉和搜索字段。如果我将子页面中的代码嵌入到 <div id="output"></div> 所在的主页中，它会正确呈现。

主页

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

主页上的JS脚本

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

加载到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>

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

我认为因为数据表插件是在内容加载之前执行的，所以你可以尝试如下回调函数：

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

【讨论】：