jQuery DataTable中数据未更新

Question

您好，我使用jquery datatable（ https://datatables.net/ ）。 我在数据库中添加了一些值并刷新了数据表，但数据表显示了旧值。 一旦刷新浏览器，它就会显示更新的值。 任何人都可以在这个问题上提供帮助吗？

     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

错误和变更：

• 您在这里有一个未知数： getcomments_URL我想这是某个地方的全局变量？
• circuitPremisesJson不在您的代码中，我假设它是返回的数据，这被替换为data
• 无效的注释添加第二/ display_comments(); / refreshing the datatable display_comments(); / refreshing the datatable行中的数据表
• 您可以使用success和error但是我发现.done和.fail对我来说看起来更干净。
• 多个$('#div_comment_list')所以我在c缓存了该选择器
• 我不喜欢将option作为表行字符串的名称，所以我将其更改
• var newTableRow =""; 在循环中创建变量不是最佳选择，所以我添加了这一行

码

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

编辑：更新数据表部分

为了专注于数据表更新部分，我创建了一个新提琴。 整个事情都在这里：

这是关键部分。 我喜欢在Javascript变得复杂时使用命名空间，因此我们可以这样做：

var myApp = myApp || {};

然后添加一个名为“ commentTable”的对象来保存我们的数据表：

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

这些是关键行：（请参阅如何使用命名空间myApp.components.commentTable ）

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

第一行将行添加到新的Datatable对象。 第二次重绘带有新数据的表。 这样就可以将行直接添加到表中，您可以做到并完成。

这是我上面修改过的代码：

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

上面的关键是我在这里的命名空间数据中声明了注释行对象：

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

这是我使用名称空间声明数据表的位置/方式：

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

表格的标记（全部）

或者，当我的第二张表摆在小提琴中时，它可能会填充数据。

在此处查看全部操作：（请注意，这还有一点点，因为我想实际测试添加行，因此，由于没有任何Ajax服务器，因此添加了要插入的表单和手动方法；请忽略所有内容，并专注于上面提到的行）

小提琴玩： https : //jsfiddle.net/MarkSchultheiss/gwawccqt/4/

Answer 2

请检查此链接，以了解如何从Ajax数据源重新加载数据表数据。 https://datatables.net/reference/api/ajax.reload（）