javascript - 使用 AJAX 更新数据表

Question

我正在使用 AJAX 处理数据表，在页面加载时生成一个表。我的代码的第一部分工作正常。然后，根据用户输入，我想用新数据更新表。

现在，当我调用函数 updateTable() 时，它会返回我发送的正确 JSON，但我不知道如何实际更新表。 “成功”部分是错误的，但我不知道该怎么做，我尝试了很多 api 函数，但似乎没有任何效果。有什么帮助吗？

$(document).ready(function() {



var valve = "1-8000AL" //$("#valveSelect").val();
var tab = "1"
$('#dataTable').dataTable( {
    "scrollY":  "400px",
    "scrollCollapse": true,
    "paging": false,

    "ajax": {"url": "ajax/update.php","data": {"valve" : valve, "tab" : tab}},
    "dom": '<"top">rts<"bottom"filp><"clear">'
}); 



function updateTable(){

    var valve = $("#valveSelect").val();
    var tab = "2" 
    $('h3').text(tab);
    $.ajax({
        url: "ajax/update.php",
        data:{"valve" : valve, "tab" : tab},
        success: $('#dataTable').dataTable().draw()
    });

};  

});

Answer 1

首先，使用.DataTable来构建数据表，而不是.dataTable。.DataTable 是 datatables 1.10 中的新样式。 .DataTable 返回一个 DataTables api 实例，而 .dataTable 返回一个 jquery 对象。

我使用的解决方案是手动构造查询字符串(使用 $.param())，然后使用数据表 API 从新位置重新加载数据。

function updateTable(){
    var valve = $("#valveSelect").val();
    var tab = "2"
    var query_string = $.param({"valve" : valve, "tab" : tab})
    var ajax_source = "ajax/update.php?" + query_string
    var table = $("#dataTable").DataTable(); // get api instance
    // load data using api
    table.ajax.url(ajax_source).load();
};