Spring MVC + jQuery Datatables + JSON Response

Question

I have a Spring MVC application using jQuery Datatables to render the data. Here are my classes and javascript code

Employee.java

public class Employee {
    private int empId ;
    private String firstName;
    private String lastName ;

    // getters and setters
}

EmployeeResponse.java

public class EmployeeResponse {

    private List<Employee> empList ; 

    // getters and setters

}

EmployeeController.java

@Controller
@RequestMapping("/admin")
public class EmployeeController {

    @RequestMapping(value = "/get-all-employee", method = RequestMethod.POST, consumes = { MediaType.APPLICATION_JSON_VALUE })
    @ResponseBody
    public EmployeeResponse getAllEmployee(HttpServletRequest request) {
        EmployeeResponse response = new EmployeeResponse();
        try {

            response = getAllEmployeeList(); // returns response object

        } catch (Exception e) {
            logger.error("DCConsoleController::createNewStream exception: " + com.priceline.utils.StringUtils.getStackTrace(e));
            return null;
        }
        return response ; 
    }
}

emp.jsp

<div class="row">
    <table id="ldapStreamTable" class="table">
        <thead>
            <tr>
                <th>Emp Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
    </table>
</div>

emp.js

$(document).ready(function() {
    var table = $('#appTable').DataTable( {
        "sDom" : domSetting,
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page",
            "sSearch" : "<span class='add-on'><i class='icon-search'></i></span>Search Application:",
            "sZeroRecords" : "No matching records found",
        },
        "iDisplayLength" : 10,
        "aLengthMenu" : [
                [ 5, 10, 20, 25, 50, -1 ],
                [ 5, 10, 20, 25, 50, "All" ] ],
        "aaSorting" : [ [ 0, 'asc' ] ],
        'sAjaxSource': '{context}/admin/get-all-employee',
        [Pending here]
    });
});

What should I do to get the response as json and apply/use render methods for each column to render the data into the table?

[Note: looks like I can't use aoColumns' with mData for each column because my json response is list of employee objects]

Update - 1: Sample json below

{"empList":[{"empId":3,"firstName":"Kiran","lastName":"Kumar"},{"empId":1,"firstName":"John","lastName":"Smith"},{"empId":0,"firstName":"Sachin","lastName":"Kumar"}]}

My response from controller is already in json format using Jackson API. What I am unable to figure out is how to bind the json response which is a List<Employee> objects into the columns on the UI — jagamot
– jagamot, Commented Feb 9, 2016 at 3:33
@GuruprasadRao - updated the question with sample json response. — jagamot
– jagamot, Commented Feb 9, 2016 at 3:48

Guruprasad J Rao · Accepted Answer · 2016-02-09 04:39:14Z

3

I've kept your sample ajax data in github and gave it as a ajax source. You keep that part to your method which returns json response, but instead of empList as base root in json response replace it with data as I've done in the above github json file. Now apart from ajaxSource you need to map columns to your dataTables as below:

"columns": [
         { "data": "empId"},//should match column value in json file
         { "data": "firstName"},//should match column value in json file
         { "data": "lastName"}//should match column value in json file
]

A Demo here

answered Feb 9, 2016 at 4:39

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

6 Comments

jagamot Over a year ago

I just figured another way to do it by setting the "sAjaxDataProp" : 'streamList' and "aoColumns" : [ {mDataProp: "empId"}, {mDataProp: "lastName"},{mDataProp: "firstName"} ]. However, I generate a button using mRender option, how can I bind the event to it, after the table is rendered. fnRowCallback ?

Guruprasad J Rao Over a year ago

Give your button a class and add event to that class

jagamot Over a year ago

Thatz exactly what I did, but somehow the click event is not getting registered.

Guruprasad J Rao Over a year ago

I think you are not doing event delegation here.. Since you are rendering the button controls on later part to the DOM you must do event delegation like attaching control some element which contains button element and which has been registered on DOM load.. For ex: document, which is the root. So you do $(document).on('click','.yourButtonClass',function(){//click event methods});

jagamot Over a year ago

Sure, that would probably work as well. But I ended up using fnDrawCallback and binding the click event to the class like you mentioned earlier. Using fnDrawCallback option seems to be a cleane approach. Thanks for all your help.

|

Collectives™ on Stack Overflow

Spring MVC + jQuery Datatables + JSON Response

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related