implementing jquery datatable using json data

Question

I have a method in my controller class that returns json data and it is in the following format

[  
   {  
      "userRoleMappingTO":{  
         "userRoleMappingId":1,
         "applicationId":1,
         "userId":194,
         "roleId":1,
         "smartwcmTreeId":1
      },
      "roleTO":{  
         "roleId":1,
         "roleName":"Consumer",
         "applicationId":1
      },
      "userTO":{  
         "userId":194,
         "applicationId":"pgm-apn",
         "username":"joe.antony",
         "password":"password1",
         "email":"[email protected]",
         "firstName":"Joey",
         "lastName":"Anto",
         "enabled":true,
         "userCreated":"sitepmadm",
         "userModified":"sitepmadm",
         "createdTime":1423755723104,
         "updatedTime":1423755961440
      }
   },
   {  
      "userRoleMappingTO":{  
         "userRoleMappingId":2,
         "applicationId":1,
         "userId":189,
         "roleId":2,
         "smartwcmTreeId":1
      },
      "roleTO":{  
         "roleId":2,
         "roleName":"Contributor",
         "applicationId":1
      },
      "userTO":{  
         "userId":189,
         "applicationId":"pgm-apn",
         "username":"test.user",
         "password":"password1",
         "email":"[email protected]",
         "firstName":"newuser",
         "lastName":"usertest",
         "enabled":true,
         "userCreated":"sitepmadm",
         "userModified":"sitepmadm",
         "createdTime":1423490983028,
         "updatedTime":1423490983028
      }
   }
]

I am trying to display this data as a datatable and the only fields I would require are userId,username, roleName applicationId

I normally initialize the datatable as follows

 $('#example').dataTable({

            "ajax": {
                    "url": "/the url",
                    "dataSrc":  "",
                    },

            "columns":[
            {"data": "userId"},
            {"data": "applicationId"},
            {"data": "username"},
            {"data": "roleName"},
            ],
            });

What changes do I need to make to get the correct data displayed in my table

Gyrocode.com · Accepted Answer · 2015-05-08 10:32:12Z

2

Your DataTables initialization code should be changed to:

$('#example').DataTable({
    "ajax": {
        "url": "/the url",
        "dataSrc": ""
    },
    "columns": [
       {"data": "userTO.userId"},
       {"data": "userTO.applicationId"},
       {"data": "userTO.username"},
       {"data": "roleTO.roleName"}
    ]  
});

where dataSrc set to empty string allows you to return plain array and dotted notation in columns.data property allows to access nested objects.

See this JSFiddle for demonstration.

edited May 8, 2015 at 10:32

answered Mar 16, 2015 at 19:50

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

Collectives™ on Stack Overflow

implementing jquery datatable using json data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related