jQuery DataTable中数据未更新

Question

Hi im using jquery datatable( https://datatables.net/ ). im adding some values in database and refreshing the datatable but datatable is showing old values. once i refresh the browser then it is showing updated value. can anyone help on this issue?

     function display_comments(){
       $.ajax({
        url: getcomments_URL,
        method: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",

        success: function(data, status, xhr) {

                $.each(circuitPremisesJson, function(index, item) {

                    var option = "<tr><td>" + item.comments + "</td><td>" + item.comment_TYPE + "</td><td>" + item.lname + "</td><td>" + item.action_PERFORMED + "</td><td>" + item.entry_TIME + "</td></tr>";

                    $('#div_comment_list tbody').append(option);
                });
                $('#div_comment_list').DataTable({destroy: true});                  

        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(ajaxOptions);
        }
    });
    }

    $("#add_comments").click(function(){
    // here i have ajax code for add comments in database


    display_comments();  / refreshing the datatable 

    });

Answer 1

Errors and changes:

• You have one unknown here: getcomments_URL I guess that is some global variable somewhere?
• circuitPremisesJson was not in your code, I assume it is the data returned, this replaced that with data
• Invalid comment added second / display_comments(); / refreshing the datatable display_comments(); / refreshing the datatable in that line
• you can use the success and error but I find the .done and .fail looks cleaner to me.
• multiple $('#div_comment_list') so I cached that selector in c
• I did not like option as a name for a table row string so I changed it
• var newTableRow =""; creation of variables in a loop is not optimal so I added this line

Code

function display_comments() {
  $.ajax({
    url: getcomments_URL,
    method: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
  }).done(function(data, status, xhr) {
    var c = $('#div_comment_list');
    var newTableRow ="";
    $.each(data, function(index, item) {
      newTableRow = "<tr><td>" + item.comments + "</td><td>" + item.comment_TYPE + "</td><td>" + item.lname + "</td><td>" + item.action_PERFORMED + "</td><td>" + item.entry_TIME + "</td></tr>";
      c.find('tbody').append(newTableRow);
    });
    c.DataTable({
      destroy: true
    });
  }).fail(function(jqXHR, textStatus, errorThrown) {
    alert(textStatus);
  });
}

$("#add_comments").click(function() {
  // here i have ajax code for add comments in database
  display_comments(); // refreshing the datatable
});

EDIT: Update Datatable portion

Just to concentrate on the Datatable update portion, I created a new fiddle. That whole thing is here:

Here are the key portions of that. I like to use namespaces for my Javascript when it gets complex so let's do that:

var myApp = myApp || {};

Then add an object called "commentTable" to hold our Datatable:

myApp.components = {
  commentTable: {},
  ... more components 

These are the key rows: (see how I useed the namespace myApp.components.commentTable )

myApp.components.commentTable.row.add(commentRow);
myApp.components.commentTable.draw();

That first line adds rows to our new Datatable object. The second redraws the table with the new data. That adds the row directly to the table, you could do that and be done.

Here is my code above reworked for that:

.done(function(data, status, xhr) {
      $.each(data, function(index, item) {
          var commentRow = {
              "comments": item.comments,
              "comment_TYPE": item.comment_TYPE,
              "lname": item.lname,
              "action_PERFORMED": item.action_PERFORMED,
              "entry_TIME": item.entry_TIME
        }
        myApp.components.commentTable.row.add(commentRow);
      });
      myApp.components.commentTable.draw();
    })

The key to that above is my declaration of the comment rows objects in my namespaced data here:

myApp.data = {
  commentsURL: "https://www.example.com/comments/get",
  commentcolumns: [{
    title: 'Comments',
    data: 'comments'
  }, {
    title: 'Type',
    data: 'comment_TYPE'
  }, {
    title: 'Last Name',
    data: 'lname'
  }, {
    title: 'Action',
    data: 'action_PERFORMED'
  }, {
    title: 'Time',
    data: 'entry_TIME'
  }],
  commentdata: [{
    "comments": "Caught some fish in the lake.",
    "comment_TYPE": "Fisherman",
    "lname": "Wonka",
    "action_PERFORMED": "caught",
    "entry_TIME": new Date(2016, 4, 21, 18, 45, 23, 9)
  },...more rows
  ],
  ...more data stuff
};

Here is where/how I declared the Datatable using my namespace:

myApp.components.commentTable = $('#exampleemtpy').DataTable({
  data: myApp.data.columndata,
  columns: myApp.data.commentcolumns
});

Markup for the table (all of it)

OR it could be populated with data as my second table is in the fiddle.

See this all in action here: (Note this has a bit more as I wanted to actually test adding rows, SO, I added a form and manual methods to insert since I did NOT have any ajax server; ignore that all and focus on the lines noted above)

Fiddle to play with: https://jsfiddle.net/MarkSchultheiss/gwawccqt/4/

Answer 2

Please check this link on how to Reload the datatable data from the Ajax data source. https://datatables.net/reference/api/ajax.reload()