Getting JavaScript JSON string to populate DataTable

Question

I have a java function that gets a JSON string of data from a Servlet in Java. I am trying to use that data to populate a datatable (http://www.datatables.net/examples/data_sources/ajax.html)

This is the way that the DataTables website instructs users to populate datatables:

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

And this is the javascript method that calls the doPost method in my servlet to generate and return the JSON:

<script>
  $(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
    //$('#somebutton').click(function() { // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
    var bodyContent = $.ajax({
      url : "DAOserv",
      global : false,
      type : "POST",
      data : "name=value",
      dataType : "json",
      async : false,
      success : function() {
                  console.log("ok");
                  alert("ok");  
                }
    }).responseText;
    console.log(bodyContent);
  });
</script>

How can I get the JSON string in var bodyContent to populate the datatable?

machineghost · Accepted Answer · 2014-07-22 16:55:15Z

2

First off, you're not really doing AJAX; when you do:

var bodyContent = $.ajax({
    url : "DAOserv",
    global : false,
    type : "POST",
    data : "name=value",
    dataType : "json",
    async : false,
    success : function() {
            console.log("ok");
            alert("ok");    
}).responseText;

You set async: false ... but AJAX stands for Asynchonous Javascript and XML. With an AJAX approach the following happens:

You start the request by doing $.ajax
The server takes however long to respond; the user's browser is not locked up during this time
When the server responds the success callback you defined gets called

With your approach

You start the request by doing $.ajax
The user's browser is locked up while waiting for a response
When the server responds your code (after the $.ajax call) is invoked.

To make your code actual AJAX do this instead:

var bodyContent = $.ajax({
    url : "DAOserv",
    global : false,
    type : "POST",
    data : "name=value",
    dataType : "json",
    success : function(responseText) {
            bodyContent = responseText
    }
});

Of course, once the response comes back you also need to build your Data Table, so what you really want is:

    success : function(responseText) {
                $('#example').dataTable( {
                    "data": responseText
                });
    }

(Or something to that effect; I forget DataTable's exact syntax.)

answered Jul 22, 2014 at 16:55

machineghost

36k33 gold badges174 silver badges270 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jFram Over a year ago

Ok thanks for the advice about making AJAX serve its purpose! I'm still trying to figure out how to make the bodyContent JSON data populate a datatable.

machineghost Over a year ago

One other point of clarification: DataTables has two modes (that we care about). The first mode does the AJAX through DataTables, and that's the mode where you pass DataTables an URL as an ajax property. That mode doesn't use jQuery directly at all ... and personally I'm not a fan of that mode. What I have described above is technically not what DataTables would call its AJAX mode; from DataTables perspective the above code is just your standard non-AJAX mode of DataTables (as you're doing all the AJAX outside of DataTables).

Алексей Овчинников · Accepted Answer · 2014-07-22 17:06:47Z

2

Refer to jQuery.ajax docs. The data returned from server in first argument of success callback. Also note that all manipulations with this data whould be inside this callback. I guess you should additionally check status argument:

$(document).ready(function() {
    var bodyContent = null;
    $.ajax({
        url : "DAOserv",
        global : false,
        type : "POST",
        data : "name=value",
        dataType : "json",
        success : function(data, status) {
            console.log(data);
            $('#example').dataTable( {
                "data": $.parseJSON(data),
                "columns": [
                    { "title": "Engine" },
                    { "title": "Browser" },
                    { "title": "Platform" },
                ]
            });   
         });
    });
});

UPDATE To populate data server should respond with JSON encoded array of data and you should parse it and pass to dataTable as it noted here.

edited Jul 22, 2014 at 17:06

answered Jul 22, 2014 at 16:51

Алексей Овчинников

2971 silver badge3 bronze badges

1 Comment

jFram Over a year ago

This does not answer the question. I'm wondering how to use that data (in this case the data in the bodyContent variable) to populate the Datatable.

Collectives™ on Stack Overflow

Getting JavaScript JSON string to populate DataTable

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related