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

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

$(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加载无法正确加载数据表

1 个答案: