如何让引导数据表与javascript自动刷新一起工作？_Javascript_Html_Datatables

如何让引导数据表与javascript自动刷新一起工作？

javascript html datatables

如何让引导数据表与javascript自动刷新一起工作？,javascript,html,datatables,Javascript,Html,Datatables,我使用脚本调用每5秒刷新一次的html表。以下内容每5秒成功刷新一次我的HTML表格，并从index.HTML页面上的table.HTML加载表格： table.html <table><tr><td>TEST</td></tr></table> <html> <body> <div id="tableHolder"></div> </body>

我使用脚本调用每5秒刷新一次的html表。以下内容每5秒成功刷新一次我的HTML表格，并从index.HTML页面上的table.HTML加载表格：

table.html

<table><tr><td>TEST</td></tr></table>

    <html>
<body>
    <div id="tableHolder"></div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('table.html', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>
    </html>

测试

index.html

<table><tr><td>TEST</td></tr></table>

    <html>
<body>
    <div id="tableHolder"></div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('table.html', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>
    </html>


$（文档）.ready（函数（）{
刷新表（）；
});
函数刷新表（）{
$（'#tableHolder'）.load（'table.html'，function（）{
设置超时（刷新表，5000）；
});
}

我正在尝试实现以下功能，使用bootstrap datatable，当表包含在index.html页面中时，我的bootstrap datatable可以工作，但是当我添加刷新脚本并将表放在table.html中时，该表无法加载并且不会产生控制台错误：

table.html:

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">

                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th class="disabled-sorting text-right">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Tiger Nixon</td>
                                                    <td>System Architect</td>
                                                    <td>Edinburgh</td>
                                                    <td>61</td>
                                                    <td>2011/04/25</td>
                                                    <td class="text-right">
                                                        <a href="#" class="btn btn-link btn-info like"><i class="fa fa-heart"></i></a>
                                                        <a href="#" class="btn btn-link btn-warning edit"><i class="fa fa-edit"></i></a>
                                                        <a href="#" class="btn btn-link btn-danger remove"><i class="fa fa-times"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
</table>


名称
位置
办公室
年龄
开始日期
行动
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25

index.html:

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">

                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Position</th>
                                                    <th>Office</th>
                                                    <th>Age</th>
                                                    <th>Start date</th>
                                                    <th class="disabled-sorting text-right">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Tiger Nixon</td>
                                                    <td>System Architect</td>
                                                    <td>Edinburgh</td>
                                                    <td>61</td>
                                                    <td>2011/04/25</td>
                                                    <td class="text-right">
                                                        <a href="#" class="btn btn-link btn-info like"><i class="fa fa-heart"></i></a>
                                                        <a href="#" class="btn btn-link btn-warning edit"><i class="fa fa-edit"></i></a>
                                                        <a href="#" class="btn btn-link btn-danger remove"><i class="fa fa-times"></i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
</table>

（大型HTML输出已删除）


$（文档）.ready（函数（）{
刷新表（）；
});
函数刷新表（）{
$（'#fresh datatables'）.load（'table.html'，function（）{
设置超时（刷新表，5000）；
});
}
$（文档）.ready（函数（）{
$（'#datatables'）。DataTable({
“pagingType”：“完整编号”，
“长度菜单”：[
[10, 25, 50, -1],
[10,25,50，“全部”]
],
回答：是的，
语言：{
搜索：“\u输入”，
搜索占位符：“搜索记录”，
}
});
var table=$（'#datatables'）。DataTable（）；
//编辑记录
table.on（'click'，'edit'，function（）{
$tr=$（this.closest（'tr'）；
if（$tr.hasClass（'child'））{
$tr=$tr.prev（“.parent”）；
}
var data=table.row（$tr.data（）；
警报（'按第行：'+data[0]+'+data[1]+'+data[2]+'\'的第行'）；
});
//删除记录
表.on（'click'，'remove'，函数（e）{
$tr=$（this.closest（'tr'）；
table.row（$tr.remove（）.draw（）；
e、 预防默认值（）；
});
//相似记录
table.on（'click'，'like'，function（）{
警报（“您点击了Like按钮”）；
});
});

当我删除刷新脚本并在以下之间插入表时：

<div class="fresh-datatables">


                                </div>

它能工作，所以我不明白为什么它不能工作

如何修复此问题？

请尝试先销毁表，然后再次初始化。请尝试先销毁表，然后再次初始化。