jQuery Datatable重新加载数据-JSON到列

Question

I have table that first time is server - side rendered. I want on some click event refresh data in table.
Problem is how to "bind" specific json object propertie to specific column. I receive json object with array of objects where only some of properties are interesting me.
I want
Table column -- json object propertie

ID -- id
Name -- name + surname
Cooperation -- scCooperationCollection
Skills -- scSkillsCollection
Experience -- workExperience

HTML table: http://pastebin.com/b5yRWsGe
JS reload table: http://pastebin.com/GzS8tpV6
JSON example : http://pastebin.com/AyBSrSui

Answer 1

See columns.data or columns.render options on how to bind source data to table columns or produce custom content for a cell.

You can access source data properties using dotted notation in columns.data or even join arrays with [] notation. For more complex data rendering like joining two fields, use columns.render instead.

For example:

var table = $('#example').DataTable({
    ajax: {
       url: 'https://api.myjson.com/bins/3x4ql',
       dataSrc: 'aaData'
    },
    columns: [
        { data: "id" },
        { 
            data: null, 
            render: function(data, type, full, meta){
               return full['name'] + ' ' + full['surname'];
            }
        },
        { data: "scCooperationCollection[,].scFields.name" },
        { data: "scSkillsCollection[,].scFields.name" },
        { data: "workExperience" }
    ]        
});

See this jsFiddle for code and demonstration.

Answer 2

You can navigate through the desired properties in returned json object and tie up same to your table something like below:

table.on( 'xhr', function () {
    var json = table.ajax.json();
    var obj = JSON.parse(json)
    var tableJson = {"ID":obj.aaData[0].id};
    console.log(json);
} );