使用json数据实现jquery数据表答案

【问题标题】：implementing jquery datatable using json data使用json数据实现jquery数据表
【发布时间】：2015-02-26 18:20:07
【问题描述】：

我的控制器类中有一个返回 json 数据的方法，格式如下

[  
   {  
      "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":"joey@gmail.com",
         "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":"test.user@test.com",
         "firstName":"newuser",
         "lastName":"usertest",
         "enabled":true,
         "userCreated":"sitepmadm",
         "userModified":"sitepmadm",
         "createdTime":1423490983028,
         "updatedTime":1423490983028
      }
   }
]

我正在尝试将此数据显示为数据表，我需要的唯一字段是 userId、username、roleName applicationId

我通常如下初始化数据表

 $('#example').dataTable({

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

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

我需要进行哪些更改才能在表格中显示正确的数据

【问题讨论】：

标签： jquery json jquery-datatables

【解决方案1】：

您的 DataTables 初始化代码应更改为：

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

其中dataSrc 设置为空字符串允许您在columns.data 属性中返回纯数组和点分表示法允许访问嵌套对象。

请参阅this JSFiddle 进行演示。

【讨论】：