JQuery Data Table not displaying data from ajax source

Question

I am using Jquery Data table with ajax source that returns a JSON object, And I have one more array in Data array(that accepts jquery data table). My ajax source page/URI giving me a response as expected when i opened that page seperately. but that Data table not displaying empty table. This is the script in my page.

< script type = "text/javascript"
language = "javascript"
class = "init" >

  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}',
    "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) {
          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;
      }
    }]



  });
});

< /script>

i am getting this row.data always undefined.

And this is my server side equivalant of data array(accepting format of DataTable) prepared.And also i having array of arrays in Data array.

public class AllSChedulesInner {   

    Public String AppoitmntDate {get;set;}
    Public List<MBESLRwraper> MBEvsCorps{get;set;}

}

        public class TotalAppointmentsTableWraper {

        public boolean selected {get;set;}
        public Integer draw{get;set;}
        public Integer recordsTotal{get;set;}
        public Integer recordsFiltered{get;set;}
        public List <AllSChedulesInner> data{get;set;}


            public TotalAppointmentsTableWraper(Integer draw, Integer recordsTotal, Integer recordsFiltered, list <AllSChedulesInner> data) {
            this.draw = draw;
            this.recordsTotal = recordsTotal;
            this.recordsFiltered = recordsFiltered;
            this.data= data;

            }

       }

How could i display my data from server.

Answer 1

Are there any errors in the console?

Also, I notice that you have the AJAX set twice. You should only need that set one time.

DataTables has builtin the success and error functions so you don't need to add those as they will cause problems with returning the correct response.