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

您可以使用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
});

编辑：更新可数据部分

为了专注于Datatable更新部分，我创建了一个新的小提琴。整件事就在这里：

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

var myApp = myApp || {};

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

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

以下是我使用命名空间声明Datatable的地方/方式：

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

数据未在jquery数据表中更新

2 个答案: