Question

I have a Java (Spring MVC) backend that returns POJOs as JSON objects as follows:

@RequestMapping(value = "/getWidgetsByType", method = RequestMethod.POST)
public @ResponseBody List<WidgetVO> getWidgetsByType(@RequestParam("type") String type)
{
    return widgetDAO.getWidgetsByType(token);
}   

public class WidgetVO {
    private String type;
    private String name;
    private boolean isAwesome;

    // Getters and setters, etc.
}

In the frontend I’m trying to call /getWidgetsByType from inside a jQuery $.getJSON call, and then use the JSON results coming back from that to populate a datatable. Specifically, I want the datatable to appear inside a <div> tag that is currently empty at page load as follows:

<div id="#table-to-display"></div>

var t = getTypeFromDOM();

$.getJSON(
    url: "/getWidgetsByType",
    data: {
        type: t
    },
    success: function() {
        // How do I extract the JSON version of the List<WidgetVO>'s coming
        // back from the server and use them to populate the table?
        $("#table-to-display").datatable();
    }
);

I would like the datatable to contain the same columns as the fields of the WidgetVO (type, name, isAwesome), all as String values (no renderers, etc.).

Thanks in advance for any help here!

Answer 1

Example from the datatable site gives you all the details required.

Example JS code

$(document).ready(function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php" // for you it will be - /getWidgetsByType
  } );
} );

Your json should be something like this

{
  "sEcho": 1,
  "iTotalRecords": "57",
  "iTotalDisplayRecords": "57",
  "aaData": [
    [],[],[],...
  ]
}

Here’s example showing to set the column names on the fly.

Cheers!!