Datatables是一个功能丰富的开源JS表格插件，它能够将数据以受用户控制的方式呈现在网页上。而Datatables和JSON的结合则能增强Datatables的灵活性和适用性。

为了使用JSON数据渲染Datatables，必须先将数据按照规定的格式转化为JSON对象。以下示例代码将演示如何以JSON格式初始化Datatables。

$(document).ready(function() {
var data = [
{
"name": "Tom",
"age": 18,
"gender": "male",
"hobby": ["reading", "running"]
},
{
"name": "Lucy",
"age": 20,
"gender": "female",
"hobby": ["drawing", "singing"]
},
{
"name": "Jerry",
"age": 22,
"gender": "male",
"hobby": ["playing games", "swimming"]
}
];
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'age' },
{ data: 'gender' },
{ data: 'hobby' }
]
} );
});

代码中的"data"数组包含三个对象，每个对象表示一个人的信息。而Datatables的初始化选项中的"data"属性指定了要渲染的数据源为"data"数组，而"columns"属性则指定了每列数据显示的字段。需要注意的是，如果对象的某项"Hobby"具有多个值，则将以逗号分隔的字符串模式呈现在单元格中。

由于Datatables支持自定义列属性，因此可以进行更为细化的列设置。比如在上述示例代码中，如果想将"hobby"列设置为数据列，用于搜索和排序，需要将"columns"中该列的配置从“data”转为“orderable”:

...
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'age' },
{ data: 'gender' },
{ 
data: 'hobby',
orderable: true,
render: function(data, type, row) {
return data.join(', ');
}
}
]
} );
...

在上述代码中，引入了一个新的配置项"render"，使得"hobby"列能够以逗号分隔的方式呈现出多个值。并且由于"hobby"列的值类型为数组，因此通过该函数将多个值转换为字符串，用于呈现在单元格中。

综上所述，Datatables和JSON两者的组合使得数据渲染更加灵活，可应用于更多场景之中。不过，仅仅演示了Datatables+JSON的一个基础用法，更多个性化定制还需要开发者自行实现。