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

Question

我正在通过 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>

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

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

Datatables doesn't load properly using Ajax load

ajax

jquery

datatables