Question

我正在尝试从db获取记录并使用返回的json填充dataTable。

我的应用程序工作正常，但我想每隔30秒刷新一次表格，并从db重新填充添加/修改的行。

Ajax重新加载无效。我需要你的建议知道我在哪里弄错了？

这是我的代码..

数据表脚本

var table;

function submitData(){
    alert('Method Called');
    table=$('#table').dataTable({
        "pagingType" : 'full_numbers',
        "scrollY" : "200px",
        "dom" : 'TRlfrCtip',
        "colVis" : {
            "activate" : "mouseover",
            "restore" : "Restore"
        },
        "tableTools" : {
            "aButtons" : ["copy","csv","xls","pdf","print"],
             "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
        },
        "ajax" : {
            "url" : '../DataTableExample/FetchRows',
            "dataType" : "json",
            "type" : "POST",

        },
        "aoColumns" : [ {
            "mData" : "id",
            "sTitle" : "S. No"
        }, {
            "mData" : "name",
            "sTitle":"Name"
        }, {
            "mData" : "age",
            "sTitle":"Age"
        }, {
            "mData" : "designation",
            "sTitle":"Designation"
        }, {
            "mData" : "qualification",
            "sTitle": "Qualification"
        }, ],
        "deferRender": true,
        "columnDefs":[
        {
            "targets" : [0],
            "visible" : false,
            "searchable" : true
        }
        ]
    });



$('#table tbody').on('click','tr',function(){

    $(this).toggleClass('selected');
});

    setInterval( function () {
        table.ajax.reload();
    }, 30000 );

}

function hideThings(){
    $('#table_length').css("display","none");
}

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DataTable Example</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColVis/css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colvis.jqueryui.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colVis.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.css">

<!-- Custom Javascript File -->
<script type="text/javascript" charset="utf8" src="jsFiles/DataTableSamplejs.js"></script>

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jqueryFiles/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.js"></script>

</head>
<body>
    <input id="submit" type="submit" value="Submit" onclick="submitData()"/>
    <table id="table" class="display" cellspacing="0" width="100%">
        <tbody></tbody>
    </table>
    <input id="hideButton" type="submit" value="Hide" onclick="hideThings()"/>
</body>
</html>

Answer 1

好的2件事，

一次改变

setInterval( function () {
        table.ajax.reload();
    }, 30000 );

到

setInterval( submitData , 30000 );

和

table=$('#table').dataTable({
        "pagingType" : 'full_numbers',
         destroy: true,    //ADD DESTROY TRUE
.
.
.
..

Answer 2

以下代码将每30秒重新加载一次数据表。

更改

setInterval( function () {
        table.ajax.reload();
    }, 30000 );

要

setInterval( submitData , 30000 );

Answer 3

我得到了解决方案..

我使用事件委托来跟踪执行排序的列索引，并使用该变量动态地将其应用于“order”选项。正如你们建议我更改ajax.reload以调用setInterval（submitData，30000）并在该函数内部，如果找到则销毁该表。它现在按预期工作..

谢谢大家的支持： - ）

Answer 4

这就是我每2秒钟取一次的方式

setTimeout(function(){  $('#table').DataTable().ajax.reload();  },2000);

无需销毁重装表。

Answer 5

不需要破坏就可以重新加载数据。您只能重新加载数据

function reloadDatatable () {
    $('#example').DataTable().ajax.reload();
}; 
setInterval( reloadDatatable , 1000 );

DataTable每30秒自动刷新一次不起作用

5 个答案: