JQuery数据表不显示来自ajax源的数据

Question

我正在使用带有返回JSON对象的ajax源的Jquery Data表，而我在Data数组中有一个数组（接受jquery数据表）。当我单独打开该页面时，我的ajax源页面/ URI给出了我预期的响应。但是那个Data表没有显示空表。这是我页面中的脚本。

< 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>

我的 row.data 总是未定义。

这是我的数据阵列（接受DataTable的格式）准备的服务器端等价物。而且我在数据数组中有数组数组。

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;

            }

       }

如何从服务器显示我的数据。

Answer 1

控制台中是否有错误？

另外，我注意到你设置了AJAX两次。你应该只需要一次这个设置。

DataTables内置了success和error函数，因此您无需添加这些函数，因为它们会导致返回正确响应时出现问题。