javascript - 使用 AJAX XMLHttpRequest 填充 DataTable 的主体

Question

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

我有两个选择框。选择两者后，我使用 AJAX 请求(调用 PHP 函数)来填充我的数据表。调用后，该表将始终填充至少一行(通常是多行)。我正在 echo'ing html 来制作表行，而不是使用 rows.add()。坦率地说，这样做的原因是我不确定如何将行的数据从 PHP 函数传递回(因为我需要在从数据库查询多行后将它们传递到可以使用行的 JavaScript)。添加()。 table 完全填满了。

第一个问题是行的格式不符合标题(它们不与标题对齐)。

第二个问题是，以这种方式填充后，我失去了单选功能(当我将页面提交给自身以加载表格时，该功能正在工作)。我假设这是因为我在初始化表后填充表而不使用 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;
}   

Answer 1

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

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

解析 XML 的方法有很多种，google 是你的 friend ，但是你可以在这里看到标准 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() 但除非它是一个特别大的数据集，否则您始终可以按照以下方式重做整个表:How to refresh DataTables

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

编辑:奖励回合 Ajax 源数据

如果您设置了从 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