JQuery数据表服务器端自动刷新_Jquery_Ajax_Jquery Datatables

JQuery数据表服务器端自动刷新

jquery ajax

JQuery数据表服务器端自动刷新,jquery,ajax,jquery-datatables,Jquery,Ajax,Jquery Datatables,你好，很抱歉我的英语不好，但我希望，每个人都能理解我的意思我在MySQL数据库中创建了一个表，表中每隔一秒就会充满数据（日志条目）。因此，我创建了一个html端，使用JQuery和Datatables插件来查看条目，我不能每次都使用PhpMyAdmin登录来查看最新条目这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon"

你好，很抱歉我的英语不好，但我希望，每个人都能理解我的意思

我在MySQL数据库中创建了一个表，表中每隔一秒就会充满数据（日志条目）。因此，我创建了一个html端，使用JQuery和Datatables插件来查看条目，我不能每次都使用PhpMyAdmin登录来查看最新条目

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

<title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">


 <script type="text/javascript" language="javascript" src="./js/jquery.js"></script>
 <script type="text/javascript" language="javascript" src="./js/jquery.dataTables.js"></script>
 <script type="text/javascript" language="javascript" src="./js/fnReloadAjax.js"></script>

 <script type="text/javascript" language="javascript" class="init">

$(document).ready(function() {
    $('#log').DataTable( {
        "bStateSave": true,
        "processing": true,
        "serverSide": true,
        "cache": false,
        "aaSortingFixed": [[4,'desc']],
        "aoColumns": [
            { "sClass": "left" },
            { "sClass": "center" },
            { "sClass": "right" },
            { "sClass": "center" },
            { "sClass": "center" },
            { "sClass": "center" }
        ],
        "ajax": "server_processing.php"
} );

setInterval(function() {otable.fnReloadAjax(null)}, 10000);


} );


</script>

</head>

<body class="dt-example">

<table id="log" class="display" cellspacing="0" width="75%">
<thead>
    <tr>
        <th>TEST A</th>
        <th>TEST B</th>
        <th>TEST C</th>
        <th>TEST D</th>
        <th>TEST E</th>
        <th>TEST F</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>TEST A</th>
        <th>TEST B</th>
        <th>TEST C</th>
        <th>TEST D</th>
        <th>TEST E</th>
        <th>TEST F</th>
    </tr>
</tfoot>
</table>

</body>
</html>


DataTables示例-服务器端处理
$（文档）.ready（函数（）{
$（'#log'）。数据表（{
“bStateSave”：正确，
“处理”：对，
“服务器端”：正确，
“缓存”：false，
“aaSortingFixed”：[[4，'desc']]，
“aoColumns”：[
{“sClass”：“left”}，
{“sClass”：“center”}，
{“sClass”：“right”}，
{“sClass”：“center”}，
{“sClass”：“center”}，
{“sClass”：“center”}
],
“ajax”：“server_processing.php”
} );
setInterval（function（）{otable.fnReloadAjax（null）}，10000）；
} );
测试A
测试B
测试C
测试D
测试E
测试F
测试A
测试B
测试C
测试D
测试E
测试F

我看到网格中的所有数据都是正确的，但问题是，表不会用MySQl表中的新条目自动刷新表中的所有10秒钟，我必须通过浏览器重新加载页面来刷新侧边

作为Java初学者，有没有人可以帮助我，错误在哪里，正确的方法是什么？非常感谢您。

您必须先定义您的可旋转表，然后才能使用它：
澄清一下：下面是您应该使用的全部代码-不要调用DataTable两次-这将给您一个关于重复初始化的错误

$(document).ready(function() { var otable = $('#log').DataTable( { "bStateSave": true, "processing": true, "serverSide": true, "cache": false, "aaSortingFixed": [[4,'desc']], "aoColumns": [ { "sClass": "left" }, { "sClass": "center" }, { "sClass": "right" }, { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" } ], "ajax": "server_processing.php" } ); setInterval( function () { otable.ajax.reload(); }, 10000 ); });

将DataTable对象保存在变量中

您是否定义了两次表？您还有其他调用$（“#log”）.DataTable的功能吗？-比吉特·马丁内尔29分钟前
我不明白你的意思，所以这是使用的代码：

<script type="text/javascript" language="javascript" class="init"> $(document).ready(function() { $('#log').DataTable( { "bStateSave": true, "processing": true, "serverSide": true, "cache": false, "aaSortingFixed": [[4,'desc']], "aoColumns": [ { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" } ], "ajax": "server_processing.php" } ); var otable = $('#log').DataTable( { "bStateSave": true, "processing": true, "serverSide": true, "cache": false, "aaSortingFixed": [[4,'desc']], "aoColumns": [ { "sClass": "left" }, { "sClass": "center" }, { "sClass": "right" }, { "sClass": "center" }, { "sClass": "center" }, { "sClass": "center" } ], "ajax": "server_processing.php" } ); setInterval( function () { otable.ajax.reload(); }, 10000 ); } );

$（文档）.ready（函数（）{ $（'#log'）。数据表（{ “bStateSave”：正确， “处理”：对， “服务器端”：正确， “缓存”：false， “aaSortingFixed”：[[4，'desc']]， “aoColumns”：[ {“sClass”：“center”}， {“sClass”：“center”}， {“sClass”：“center”}， {“sClass”：“center”}， {“sClass”：“center”}， {“sClass”：“center”} ], “ajax”：“server_processing.php” } ); 变量otable=$（'#log'）。数据表（{ “bStateSave”：正确， “处理”：对， “服务器端”：正确， “缓存”：false， “aaSortingFixed”：[[4，'desc']]， “aoColumns”：[ {“sClass”：“left”}， {“sClass”：“center”}， {“sClass”：“right”}， {“sClass”：“center”}， {“sClass”：“center”}， {“sClass”：“center”} ], “ajax”：“server_processing.php” } ); setInterval（函数（）{ 重载（）； }, 10000 ); } );

当我使用您显示的代码示例时，没有显示任何内容，只有表头和表尾。非常感谢，我将函数放在$（文档）中，结果是，当我第一次调用页面时，我变成了错误消息“DataTables警告：表id=日志-无法重新初始化DataTable。有关此错误的详细信息，请参阅“当我关闭弹出窗口时，该表将显示所有数据并在10秒钟内全部刷新。是否定义了两次表？是否还有其他对$（“#log”）的调用？”.DataTable？你好，birgit，请在bootom中查看我使用的代码，而他没有在Cement字段中传递。好的，我发现了错误，现在它工作正常。非常感谢你的帮助，birgit！