How to populate rows of jQuery datatable with JSON object sent back from Spring MVC?

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!

surya handoko · Accepted Answer · 2014-11-13 07:33:16Z

1.Controller

@RequestMapping(value = "/json", method = RequestMethod.GET)
public
@ResponseBody
String listUsersJson(ModelMap model) throws JSONException {
    int no=1;
    JSONArray userArray = new JSONArray();
    for (TileType tT: tD.getAll()){   
        String n=Integer.toString(no);
        String id=Integer.toString(tT.getTileTypeId());          
        String[] value =
        {n,
         tT.getTileTypeName(),
         tT.getTileTypeDensity()         
        };   
        userArray.put(value);
        no++;
    }
    String x=userArray.toString();
    String replace1=x.replace("{", "[");
    String replace2=replace1.replace("}","]");
    String replace3=replace2.replace(":",",");
   return ("{\"aaData\":"+replace3+"}");        
}

2.Dao

 @Override
public List<TileType> getAll() {
    Session session=HibernateUtil.getSessionFactory().openSession();
    List<TileType>list=new ArrayList<TileType>();
    try{
    Query query=session.createQuery("from TileType T order by T.tileTypeId DESC");
    list=query.list();
    }
    catch(HibernateException he){}
return list;
   }

3.Javascript

var table = $('#example').dataTable({
     "sPaginationType": "full_numbers",
    "sAjaxSource": "/data/tipeTile/json",
    "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_ records per page",
        "sSearch": ""
    }
         });

4.Html

  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
                            <thead>
                                <tr>
                                    <th style="width: 50px">No</th>
                                    <th>Name</th>
                                    <th>Density</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

Hope this Help

bhb · Accepted Answer · 2012-10-11 14:24:14Z

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!!

edited Oct 11, 2012 at 14:24

answered Oct 11, 2012 at 14:14

bhb

2,5914 gold badges21 silver badges32 bronze badges

7 Comments

IAmYourFaja Over a year ago

Thanks @bhb (+1) - but are bProcessing and bServerSide datatable params or app-specific query string params? What if my server-side is not a PHP file but a Spring MVC handler that gets mapped from the URL /getWidgetsByType? Thanks again!

bhb Over a year ago

It should not matter as long as your server side code pushes json format shown above. If that is difficult for some reason, you can also read from other sources. Check this. If your json is an array of objects(instead of array of array as shown above) try something like this

IAmYourFaja Over a year ago

So do I even need to call $.getJSON, or does the $("#table-to-display").datatable() { ... }; call do it for me?

bhb Over a year ago

No probs :). So if the json is an array of array like {demo:[[],[]...]}, then the order of the array elements specifies the column order.

IAmYourFaja Over a year ago

That's so cool. Thanks again - all the lightbulbs (well, most of them) just went on. thanks for helping me connect the dots

|

Kamiel · Accepted Answer · 2014-11-16 22:46:56Z

The easiest way to get the appropriate JSON data from Spring to DataTable is that instead of returning a list of your entity, return a map like this:

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

That's it and now you can have access to your objects:

 $(document).ready(function() {
$('#example').dataTable( {
    "ajax": "data/objects.txt",
    "dataSrc": "WidgetVO",
    "columns": [
        { "data": "type" },
        { "data": "name" },
        { "data": "isAwesome" }

    ]
});

});

Collectives™ on Stack Overflow

How to populate rows of jQuery datatable with JSON object sent back from Spring MVC?

3 Answers 3

Comments

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Linked

Related