Data table not displaying data from ajax source.

anildevarapu

I am using jquery data table with an source page, i have created the accepted format of data for data table properly from server side. And i have one more array (array of of arrays) in data array that is accepted by data table. is this causes any issues. and i am always getting " row.data " as undefined in render call back function. plese any one suggest me a solution.thanks

var j = jQuery.noConflict();
                        var rowindex=0;
                        var table4;
                        j(document).ready(function() { 
                            //console.log('----JSONarrayJQDtable--- '+'{!JSONarrayJQDtable}');
                        table4 = j('#example').DataTable( 
                        {
                             
                            "pagingType": "full_numbers",
                            "searching" :"true",
                            "aLengthMenu": [[10, 15,20,25,50], [10,15,20, 25,50]],
                            "iDisplayLength": 10,
                                          "sDom": 'W<"clear">lfrtip', 
                            
                            /**default orderid in asc sorting**/
                             "order": [[0, "asc"]],
                        "bSort": false,
                        "bAutoWidth": false, // Disable the auto width calculation
                        "bFilter": false,
                        //"oColumnFilterWidgets": {
                        //"aiExclude": [ 0,2,4,5,6,7,9,10 ]
                        
                        //},
                        
                        "processing": true,
                        "serverSide": true,
                        "ajax": '{!$Page.BLN_MM_TotalAppointments_HelperPage}',     //this is my ajax source page                                       
                        "fnServerData" : function ( sSource, aoData, fnCallback ) { 
                            
                            aoData.push({ "name": "searchKeySBA", "value":aoData[5].value.value});
                            console.log(aoData);
                            console.log('---@ni!-aodata array---'+aoData[5].value.value);
                            
                            $.ajax( {
                            "dataType": 'json',
                            "type": "GET",
                            "url": '{!$Page.BLN_MM_TotalAppointments_HelperPage}',
                            "data": aoData,
                            "success": fnCallback,
                            "error": function (e) {
                                  console.log('---@nil! DataTable Excep----- '+e);
                               }
                            } );
                            
                            },
                                "fnPreDrawCallback": function() {
                                           try{
                                           var info = table.page.info();
                                   rowindex=parseInt(info.start);
                                   }catch(e){}
                                             },
                                             
                                         "columns": [
               {
               data:   "item",
                render: function ( data, type, row ) {  
                var returnstring = '';
                console.log('---row.data--- '+row.data);
                if(row.data!=undefined){                          //this is always giving undefined
                    console.log('---row.data--- '+row.data);
                    
                                    for(i=0;i<row.data.length; i++) {                   
   console.log('---row.data[i].AppoitmntDate--- '+row.data[i].AppoitmntDate);
                       returnstring+='<table class="inside_tbl display" width="100%"><tbody>';
                        
                        returnstring+='<tr>'; 
                        returnstring+='<td class="eventlvl_bg" style=" width:16.6%;">'+row.data[i].AppoitmntDate+'</td>';
                        returnstring+='<td class="grptd">';
                        returnstring+='<table class="insidetkt_tbl display" width="100%">';
                        returnstring+='<tbody>';
                        var innerarray = [];
                        innerarray = row.data[i].MBEvsCorps;
                        if(innerarray.length!=undefined){
                        for (k=0; k<innerarray.length; k++) {
                                    if(innerarray[k].MBE!=null){
                                                            
                                    returnstring+='<tr>';
                                    returnstring+='<td class="grptd">'+innerarray[k].MBE.First_Name__c+' '+innerarray[k].MBE.Last_Name__c;
                                    returnstring+='<td class="grptd">';
                                    returnstring+='<table width="100%" class="insidesqans_tbl el_sqans  display hideRow">';
                                    returnstring+='<tbody>';
                                    var timeslotarray = [];
                                    timeslotarray = innerarray[k].SLRvsTime;
                                    if(timeslotarray.length!=undefined){
                                    for(j=0; j<timeslotarray.length; j++){
                                    returnstring+='<tr>';
                                    returnstring+='<td class="grptd">'+timeslotarray[j].timeframe+'</td>';
                                    returnstring+='<td class="grptd">'+timeslotarray[j].tablenum+'</td>';
                                    returnstring+='<td class="grptd">'+timeslotarray[j].Byrs.BLN_MM_SA_PROF_ID__r.First_Name__c+' '+timeslotarray[j].Byrs.BLN_MM_SA_PROF_ID__r.Last_Name__c+'</td>';
                                    returnstring+='</tr>';
                                }
                        }

                        returnstring+='</tbody></table></td></tr>'; 
                        }
                                                        }
 
                        }

                        returnstring+='</tbody></table></td> </tr></tbody></table>';
                       }             

                }

                 return returnstring;
                   } 
               }
     ]
      
                             } ); 
  } ); 

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

anildevarapu

Hi Allan, thank you so much for your response.

I am new to intigration with JQ data table. And this is my js fiddle

https://jsfiddle.net/anildevarapu/xwdrwchk/7/

I am trying to achive this form of table

http://pasteboard.co/1bbLbXrL.png

And this is My JSON response:
http://notepad.cc/myjsnfordtable

please suggest me how to achive this thank you.

allan

Unfortunately DataTables does not support rowspan or colspan in the tbody. The layout shown in your image just isn't possible in DataTables at this time. Sorry!

Allan