使用AJAX XMLHttpRequest填充DataTable的主体

Question

I previously was just submitting the page to itself to load everything and it worked fine, I just don't want to have to use all the page refreshes so I changed most of my content over to AJAX. I have played around with various things for hours and I am not sure what to do at this point.

I have two select boxes. After both have been chosen I use an AJAX request (call to a PHP function) to populate my DataTable. The table will always be populated with at least one row (usually multiple rows) after the call. I am echo'ing html to make the table rows instead of using rows.add(). The reason for this is frankly I am not sure how to go about passing the data for the rows back (because I need to pass multiple rows after they are queried from a DB) from the PHP function to the javascript where I can use rows.add(). The table fills perfectly fine.

The first problem is the rows don't format with the header (they don't align with the header).

The second problem is after filling it in this way I lose my single select functionality (which was working when I submitted the page to itself to load the table). I am assuming this is because I am filling the table AFTER it has been initialized without using rows.add().

Any input would be appreciated.

This is where I call to the php file and put the data in the table body by 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

From my understanding then yes, it is preferable to initialise the table after the data is available. In your situation I would typically suggest changing what you are sending back from your PHP file to be something that can be easily parsed into a Javascript object such as JSON or XML.

Parsing JSON: http://www.w3schools.com/json/json_eval.asp

There are many ways of parsing XML, and google is your friend, but you can see an example of standard XML parsing here http://www.w3schools.com/xml/dom_intro.asp

Once you have the data you don't need to load each row using rows.add(). If you have a javascript object that has all of the rows you need for the table as arrays you can just load that into the table when you initialise it like so:

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." }
        ]
    } );
}

I'm not sure why you'd be having a problem with aligning the header without seeing more detail of how your CSS and HTML is structured.

For updating the table, you can use rows.add() but unless it's a particularly large dataset you can always just redo the whole table as per: How to refresh DataTables

If you want to stick to responding with HTML then you can build your HTML table and then initialise DataTable on it after it has fully loaded. See: https://www.datatables.net/examples/data_sources/dom.html

Edit: Bonus Round Ajax Sourced Data

If you are set up with getting a JSON request from your PHP file and loading that via AJAX you can always just directly use that as the data source for your 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()
}

See more: https://www.datatables.net/examples/data_sources/ajax.html