How to set AJAX response to jquery data table columns?

Question

Can anyone tell me how to set the response to jquery data to each table columns.

Here is my javascript code:

$(document).ready (function() {
$.ajax({
    url: 'userController?action=list',
    success : function(response) {
        var jsonObject = $.parseJSON(response); 
        alert(jsonObject.Password);
        alert(jsonObject.UserId);
        $('#usertable').dataTable( {
            data : jsonObject,
            columns: [
                      {'jsonObject' : 'UserId'},
                      {'jsonObject' : 'Password'},
                      {'jsonObject' : 'Level'},               
                      ],
            searching : false
        });
    }
});});

Here the response in String and the response is {"UserId" : "Manohar", "Password" : "1234", "Level" : "lev"}.

Below is the jsp page.

<table id="usertable">
<thead>
    <tr>
        <th>User Id</th>
        <th>Password</th>
        <th>Level</th>
    </tr>
</thead>

I have written the above and neither I am getting error nor the row is added to table. Can you guys help me in this?

Answer 1

Here the solution is to change the response. Earlier it was {"userid":"manohar", "password":"1234"}, now I have changed it to [["manohar", "1234"]]. Then in js file

$.ajax({
    url: 'userController?action=list',
    success : function(data, textStatus, jqXHR) {
        var table_data = JSON.parse(data);
        var table = $('#usermaintenancetable').DataTable( {
            data: table_data
}); } });

So here the response is in String format and I have change it to JSON using JSON.parse() then passed this as data to data table.