使用 AJAX XMLHttpRequest 填充 DataTable 的主体 - Using AJAX XMLHttpRequest to populate the body of DataTable

我以前只是将页面提交给自己以加载所有内容，并且它工作正常，我只是不想使用所有页面刷新，所以我将大部分内容更改为 AJAX。我已经玩了几个小时的各种东西，现在我不知道该怎么做。

我有两个选择框。在两者都被选中后，我使用AJAX请求（调用PHP函数）来填充我的DataTable。调用后，表将始终填充至少一行（通常为多行）。我正在回显 html 来制作表格行，而不是使用 rows.add（）。坦率地说，这样做的原因是我不确定如何将行的数据从 PHP 函数传递回去（因为我需要在从数据库查询后传递多行）到 javascript 中我可以使用 rows.add（）。桌子填得非常好。

第一个问题是行没有与标题对齐（它们与标题不对齐）。

第二个问题是以这种方式填写后，我失去了我的单选功能（当我将页面提交给自己以加载表格时，该功能正在工作）。我假设这是因为我在不使用rows.add（）初始化后填充了表格。

任何意见将不胜感激。

这是我调用 php 文件并通过 id 将数据放入表体的地方。

function requestData(url, cfunc) {
    if (typeof url == 'undefined' | typeof cfunc == 'undefined')
    {
        return;
    }
    else{
        var xhttp;
        xhttp=new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                cfunc(xhttp);
            }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
    }
}

function getSerialNumberTableBody(xhttp) {
    document.getElementById("serialNumberTableBody").innerHTML = xhttp.responseText;
}

根据我的理解，是的，最好在数据可用后初始化表。在您的情况下，我通常建议将您从PHP文件发回的内容更改为可以轻松解析为Javascript对象（如JSON或XML）的内容。

解析 JSON：http://www.w3schools.com/json/json_eval.asp

解析

XML的方法有很多种，google是你的朋友，但你可以在这里看到一个标准XML解析的例子 http://www.w3schools.com/xml/dom_intro.asp

获得数据后，无需使用 rows.add（）加载每一行。如果你有一个javascript对象，其中包含表所需的所有行作为数组，那么当你初始化它时，你可以将其加载到表中：

function loadDataToTable(url,tableName){
    var dataSet;
    $.get(url), function(responseText) {
        /*assuming the result is the JSON you need. 
        I'm skipping over all of the checks you would do*/
        dataSet = JSON.Parse(responseText)
    };

    $("#"+tableName).DataTable( {
        data: dataSet,
        columns: [
            { title: "Col1" },
            { title: "Col2" },
            { title: "Col3" },
            { title: "Etc." }
        ]
    } );
}

我不确定为什么您在对齐标题时会遇到问题，而没有看到有关 CSS 和 HTML 结构的更多详细信息。

要更新表，您可以使用rows.add（），但除非它是一个特别大的数据集，否则您始终可以按照以下方式重做整个表：如何刷新数据表

如果你想坚持用HTML响应，那么你可以构建你的HTML表，然后在它完全加载后初始化DataTable。请参阅：https://www.datatables.net/examples/data_sources/dom.html

编辑：奖金回合阿贾克斯来源数据

如果您设置了从PHP文件获取JSON请求并通过AJAX加载该请求，则始终可以直接将其用作DataTable的数据源：

function loadAJAXDataToTable(url,tableName){
    //return DataTable object
    return $("#"+tableName).DataTable( {
        ajax: url,
    } );
}
function refreshAJAXDataTable(url, table){
    //table should be a DataTable object
    table.ajax.url(url).load()
}

另请参阅： https://www.datatables.net/examples/data_sources/ajax.html