auto update dynatable with AJAX/JSON

Question

I'm a bit lost at the moment since my code seems to work but my table is not interested. xD

I'm loading data from my db into a table and i want it to be "auto-updated" every three seconds. My JSON data is correct and the js-console displays the updated data. But my table doesn't want to display it so I have to refresh the entire page. However that's not what I want to do.

Here is my code (HTML+JS):

<script>
$(document).ready(function() {
    setInterval(function() {``
  $.ajax({
      url: "myStuff.php",
      success: function(data) {
          console.log(data);

          myRecords = $.parseJSON(data);
          $("#dynatable").dynatable({

              dataset: {
                  records: myRecords
              }
          });
      }
  });
    }, 3000);
});


<table id="dynatable">
    <thead>
    <th>test1</th>
    <th>test2</th>
    </thead>
    <tbody>
    </tbody>
</table>

PHP:

$response = array();

    while ($zeile = mysqli_fetch_array($db_erg, MYSQL_ASSOC)) {


    $response [] = array(
        "test1" => $zeile['wasd'],
        "test2" => $zeile['wasdf']
    );

}

echo json_encode($response);

When I add data to my database the returned JSON data is updated, i see it in the js-console. Problem is that my table doesn't want to display it, it just shows the "old" data.

Any suggestions to solve this?

-------------------------------------------------------------

EDIT:

I got it now! This helped me solve my problem. Thanks for the help! :) Here is my code:

$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            url: "myStuff.php",
            success: function(data) {
                console.log(data);

                var myRecords = $.parseJSON(data);

                var dynatable = $('#dynatable').dynatable({
                    dataset: {
                        records: myRecords
                    }
                }).data('dynatable');

                dynatable.settings.dataset.originalRecords = myRecords;
                dynatable.process();
            }
        });
    }, 3000);
});

I dont knwo dinatable but few table jquery plugin need 'update' trigger to show new results — Benjamin Poignant, Nov 20 '14 at 18:04

score 1 · Answer 1 · edited Dec 27 '16 at 19:33

1

this code can also update the table.

<script>
$(document).ready(function() {
    var mytable = $("#dynatable");
    setInterval(function() {
        $.ajax({
            url: "do.php",
            success: function(data) {
                myRecords = $.parseJSON(data);
                mytable.dynatable({
                    dataset: {
                        records: myRecords
                    }
                });
                mytable.data('dynatable').settings.dataset.records = myRecords;
                mytable.data('dynatable').dom.update();
                console.log(data);
            }
        });
    },
    1000);
});
</script>

edited Dec 27 '16 at 19:33

Vasis

2,281
1
16
23

answered Nov 21 '14 at 13:24

davidtall

13
4

Thank you guys for the help, but it's not working. The data is there and updated but if i remove parseJSON the data is not going to be displayed, since dynatable needs an array to display the data (i guess). Without parseJSON the code is not working, the table displays "undefined" everywhere in the table – Skar Nov 23 '14 at 23:14
– davidtall Nov 25 '14 at 14:15
Just wanted to type in real quick, the reason the above doesn't work is because dynatable considers the `settings.dataset.records` collection to be the working dataset for the current table view (so after sorting, filtering, paginating, etc. is applied), so it uses `settings.dataset.originalRecords` as the pristine source, applies its operations, then saves the results to `settings.dataset.records`, overwriting whatever was previously there. If you want to change your source dataset for the table, replace `setting.dataset.originalRecords` and call `process()`, the rest is handled for you. – jangosteve Sep 29 '16 at 13:52

auto update dynatable with AJAX/JSON

1 Answers1