使用 AJAX 更新数据表答案

【问题标题】：Updating Datatable with AJAX使用 AJAX 更新数据表
【发布时间】：2014-06-06 04:24:23
【问题描述】：

我正在使用带有 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()
    });

};

});

【问题讨论】：

成功应该类似于success: function(data){ ... }，其中data 是传入的json。
你在这里检查过这个答案吗stackoverflow.com/questions/20141432/…
@Ballbin 你能更具体一点吗？我的 ajax url 'update.php' 与 JSON 数据相呼应，但我不知道如何获取它。当页面在第一部分代码中初始化时，我什么都不做，它只是填充表格。
@Sherif 我看了看，它使用的是旧版本的数据表。我可以尝试使用新语法破坏和重建表，但这似乎不是正确的方法。我仍在学习，但似乎应该有一种方法来更新表，而无需每次都破坏和重建它。
@gback 传入函数的data 参数将是从update.php 传回的数据。

标签： javascript jquery ajax datatables jquery-datatables

【解决方案1】：

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

我使用的解决方案是手动构造查询字符串（使用 $.param()），然后使用 datatables 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();
};

【讨论】：

这很接近了！快速的事情：我认为 $.params 应该是 $.param 。我遇到的更大问题是这会将阀门和选项卡添加到查询字符串中两次。第一个是我选择的新值，但随后也添加了默认值，不知道为什么。例如：ajax/update.php?valve=1-8100&tab=2&valve=1-8000AL&tab=1&_=1402334290466
您的页面上是否有两个 ID 为“#valveSelect”的元素？如果是，请清理您的 DOM id 创建，或改用 $("#valveSelect").last().val() 或 $("#valveSelect").first().val() 之类的东西。这是与您的原始问题不同的问题。
我只是尝试从数据表初始化中注释掉 ajax 请求，并将其替换为调用 updateTable 函数以以这种方式加载默认数据，一切正常。这个问题与第一个 ajax 语句有关。不太清楚为什么。