Dynamic Columns and Table Headers from server-side processed JSON

Dynamic Columns and Table Headers from server-side processed JSON

shibin.pbshibin.pb Posts: 1Questions: 0Answers: 0

Dear Team,

I wanted to generate dynamic columns from the JSON response of server processed PHP file. Instead of defining columns
in data table script I want to load these columns from the server processed JSON file. Also wanted to load these dynamic column names as table headers.

$('#tableName').DataTable({
    'processing': true,                                    
    'serverSide': true,
    'searching': true, 
    'ordering': false,               
    'paging':   true,
    'pageLength': 10,
    'serverMethod': 'post',
    'ajax': {
        'url': 'ajax-URL.php' ,
        'dataSrc': function(json) {
            return json.aaData;
        } 
    },
       'columns': [
       { data: 'empId' },
       { data: 'empName' },
       { data: 'empDesgn' },
       { data: 'deptName' },        
       { data: 'epicNo' },
       { data: 'baseValidity' },                                
       { data: 'epicValidity' }
       ], 
     "fnDrawCallback": function (oSettings) {
       var response = oSettings.json;
        //console.log(response);
   }
});

Please find the server side response JSON below.

{
  "draw": 1,
  "iTotalRecords": 322,
  "iTotalDisplayRecords": 322,
  "aoColumns": [
    {
      "name": "Emp ID",
      "data": "empId"
    },
    {
      "name": "Name",
      "data": "empName"
    },
    {
      "name": "Department",
      "data": "deptName"
    },
  ],
  "aaData": [
    {
      "empId": "502",
      "empName": "Vijayakumar T T",
      "deptName": "OPT"
    },
    {
      "empId": "132",
      "empName": "Rohit Sharma",
      "deptName": "OPT"
    },
    {
      "empId": "133",
      "empName": "Tony John K",
      "deptName": "OPT",
    },
    {
      "empId": "134",
      "empName": "Boney Varghese",
      "deptName": "OPT",
    }
  ]
}

Please help me out to fix this Issue

Replies

  • colincolin Posts: 14,612Questions: 1Answers: 2,494

    I'm not sure what you're trying to do there, as you've specified data that isn't in the response, namely:

           { data: 'epicNo' },
           { data: 'baseValidity' },                               
           { data: 'epicValidity' }
    

    This thread should help though, it's asking the same thing.

    Cheers,

    Colin

  • JoshuaBJoshuaB Posts: 9Questions: 1Answers: 0

    @colin I have similar doubt; instead of listing hardcoded table headers <tr> in HTML,
    can column headers be defined within ajax block, similar to 'dataSrc' function?

    'ajax': {
            'url': 'ajax-URL.php' ,
            'dataSrc': function(json) {
                return json.aaData;
            },
            'dataColums': function(json) {
                return json.aoColumns;
            }
        }
    

    this will help in rendering data from different sources & render the table-headers dynamically based on the data returned by the serverside.

  • kthorngrenkthorngren Posts: 17,724Questions: 25Answers: 4,204

    See this FAQ and this example from this thread.

    Kevin

  • JoshuaBJoshuaB Posts: 9Questions: 1Answers: 0
Sign In or Register to comment.