CODEWITHSUNDEEP
javascriptphphtmlajaxjson
Skar
Skar

Reputation: 53

auto update dynatable with AJAX/JSON

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

Upvotes: 3

Views: 4162

Answers (1)

davidtall
davidtall

Reputation: 13

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>

Upvotes: 1

Related Questions