CODEWITHSUNDEEP
javajavascriptjqueryjsondatatable
jFram
jFram

Reputation: 73

Getting JavaScript JSON string to populate DataTable

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?

Upvotes: 1

Views: 4641

Answers (2)

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

Reputation: 297

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.

Upvotes: 2

machineghost
machineghost

Reputation: 35790

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:

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

With your approach

  1. You start the request by doing $.ajax
  2. The user's browser is locked up while waiting for a response
  3. 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.)

Upvotes: 2

Related Questions