CODEWITHSUNDEEP
jqueryajaxdatatables
Alex39
Alex39

Reputation: 1

JQuery DataTables ServerSide autorefresh

Hello and sorry for my bad english, but i hope, everyone can understand me what i mean.

I've create in the MySQL Database a table, which is filled with data's (log entries) every seconds. So i've create a html side wiht the JQuery and the Datatables-Plugin to see the entries and i must not login with PhpMyAdmin every time to seen the newest entries.

This is my code:

<!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>

I seen all the datas correct in the grid, but problem is, that the table doesn't auto refresh all 10 seconds ´the table with the new entries from the MySQl Table and i must refresh the side by reload the the page by the browser.

Did any one can help me as beginner in Java, where is the error and which is the correct way? Tank you very much.

Upvotes: 0

Views: 4822

Answers (3)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

You have to define your otable before you can use it:

For clarification: here's the entire code you should be using - do not call DataTable twice - that will give you an error about duplicate initialization.

$(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 );
});

Upvotes: 2

Alex39
Alex39

Reputation: 1

do you define your table twice? do you have any other calls to $("#log").DataTable ? – Birgit Martinelle 29 mins ago

i doesn't understand, what you mean, so this is the used code:

    <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 );


} );

Upvotes: 0

Aaron
Aaron

Reputation: 1208

Save your DataTable object in a variable.

Upvotes: 0

Related Questions