如何用XHR响应填充jQuery DataTable

Question

I've seen many questions about this but none of the answers have gotten me close enough to solve my problem. Hopefully it's a simple one for someone out there. I am trying to use an XHR response to populate a DataTable. The request to the Java servlet is executed by a button click. The request looks like this:

function callFileSearchServlet(){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:8080/FileSearch-1/FileSearch?selectedDataSource=foo&startDate=20180101&endDate=20180102", true );
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.send(null);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        theResponse = this.responseText;
        editedJsonText = theResponse.substring(8, theResponse.length-1);
        displaySearchResults();
    }
}    

For the sake of this post I hard coded the URL parameters that the servlet is expecting to receive. The servlet looks at the file system and writes metadata about the files to a JSON. The response technically includes the following text at the beginning

{"data":

but I'm not sure under what conditions it should actually be there so after trimming it, the response looks like this:

[{"date":"20180101","status":"Incomplete","total_files":66,"total_size":38014958},{"date":"20180102","status":"Complete","total_files":72,"total_size":55471119}]

The trouble is I can't just assign the response to a variable and use it to populate my DataTable. That approach worked when I used static data in my JavaScript file. I assigned the static data to a global JavaScript variable (myData) and used that variable as the data source in my DataTable. Like this: $(document).ready(function () { var table = $('#search_results').DataTable({ "data": myData, "columns": [ { "className": "details-control", "orderable": "false", "data": "null", "defaultContent": '', "render": function () { return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; }, "width":"15px" }, { "render": function () { return '<input type="checkbox" id="chkbx1" name="flightDirPaths" value="theValue1">'; } }, { "data": "date" }, { "data": "status" }, { "data": "total_files" }, { "data": "total_size" } ], "order": [[1, 'asc']] });

If I replace myData with the actual data, as it is formatted above, the table displays correctly. So I know the format is good. So now I have the XHR response and I don't know how to make my DataTable use it. I've looked at most of the documentation and a lot of forums but haven't seen how to do this. Can it be done? I get the feeling I have to use an AJAX request, which in spite of all the documentation I've read, I still don't really understand. More specifically, the documentation here https://datatables.net/reference/option/ajax states the following:

The ajax property has three different modes of operation, depending on how it is defined. These are: string - Set the URL from where the data should be loaded from. object - Define properties for jQuery.ajax. function - Custom data get function

Is the "URL mode" supposed to be used when the data is written to a file somewhere? Writing data to file so it can be ingested by a DataTable seems like an extra step compared to passing in the data directly from the servlet. Maybe I'm being myopic about it because I don't have much experience with this. I've noticed that the vast majority of AJAX based solutions on Stackoverflow include the URL mode but my servlet isn't writing data to file, nor do I want it to. I'm guessing the "function mode" is what I need to use. Can anyone confirm that? If that's not the best solution does anyone know how I should do this? The documentation states that the function mode requires three parameters (data, callback, and settings), like this:

$('#example').dataTable({"ajax": function (data, callback,settings){callback(JSON.parse( localStorage.getItem('dataTablesData')));}}); 

I understand the parameters conceptually but there isn't much in the way of how to actually create each one. For example, do I assign all of my servlet parameters (selectedDataSource, startDate, endDate) to a variable called "data?" If so, what does that actually look like syntactically and exactly where in my JavaScript file do I create it? The fine details of this process escape me. Perhaps there is some assumed knowledge that I don't have. Any help is appreciated.

Answer 1

I figured out a solution. I didn't have to use the function mode. I just used an AJAX call inside the DataTable initialization instead of the XHR request outside of the table initialization. The URL value in the AJAX call is the URL of my servlet. So I deleted the XHR request, created an AJAX request in the table initialization, and moved it all into the button click function so when the user clicks the button the table appears with data returned from the servlet. I posted new code above. This site helped. https://datatables.net/forums/discussion/45615/how-to-load-table-from-ajax-request

Here's my new code that works properly. The difference between my old code and the code below is between the lines that start with "var table =..." and ""columns":..."

$(document).ready(function () {
    var table = $('#search_results').DataTable({
        "ajax": {
            url: "http://localhost:8080/FileSearch-1/FileSearch?selectedSources=foo&startDate=20180101&endDate=20180102",
            method: "GET",
            xhrFields: {
                withCredentials: true
            }
        },
        "columns": [
            {
            "className": "details-control",
            "orderable": "false",
            "data": "null",
            "defaultContent": '',
            "render": function () {
                return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
            },
            "width":"15px"
            },
            { "render": function () {
                return '<input type="checkbox" id="chkbx1" name="flightDirPaths" value="theValue1">';
                }
            }, 
            { "data": "date" },
            { "data": "status" },
            { "data": "total_files" },
            { "data": "total_size" }
        ],
        "order": [[1, 'asc']]
    });