jqueryのデータ型がリロード時に再描画されない

Question

ajax呼び出しにsuccessを配置すると、データテーブルにデータが描画されません。どうすればテーブルを描くことができますか？

table_impact = $('#table_impact').DataTable({ 
      dom: 'lBfrtip', 
      buttons: [ 
       'copy', 
       { 
        extend: 'excelHtml5', 
        title: 'Details of Service Impact' 
       }, 
       'print' 

      ], 
      'bDestroy': true, 
      "bInfo": true, 
      "bProcessing": true, 
      "bDeferRender": true, 
      'iDisplayLength': 10,    
      "bSort": false, 
      searchHighlight: true, 
      ajax: { 
       url: base_url + 'api/change/self-serve', 
       type: "POST", 
       data : function(d){ 
        d.action = "impact"; 
        d.period = $("#group_period label.active").data("value"); 
        if($("#checkbox_in_flight").prop("checked")){   
         d.inflight = 1; 
        }else{ 
         d.inflight = 0; 
        } 

        coordinator_group = $(".js-basic-multiple-coordinator-group").val(); 
        if(coordinator_group && coordinator_group.length > 0){ 
         d.coordinator_group = []; 
         for(key in coordinator_group){ 
          var obj = coordinator_group[key]; 
          d.coordinator_group.push(obj);           
         } 
        } 
        change_manager_group = $(".js-basic-multiple-change-manager-group").val(); 
        if(change_manager_group && change_manager_group.length > 0){ 
         d.change_manager_group = []; 
         for(key in change_manager_group){ 
          var obj = change_manager_group[key]; 
          d.change_manager_group.push(obj);           
         } 
        } 
        company = $(".js-basic-multiple-company").val(); 
        if(company && company.length > 0){ 
         d.company = []; 
         for(key in company){ 
          var obj = company[key]; 
          d.company.push(obj);            
         } 
        } 
        status1 = $("#ticket_status").val();    
        if(status1 && status1 != 'null' && status1.length > 0){ 
         d.status = []; 
         if(typeof status1 == "string"){ 
          d.status = status1.split(","); 
         }else{ 
          for(key in status1){ 
           var obj = status1[key]; 
           d.status.push(obj);           
          } 
         } 
        } 
        ops_cat_tier1 = $(".js-basic-multiple-ops-cat-tier1").val(); 
        if(ops_cat_tier1 && ops_cat_tier1.length > 0){ 
         d.ops_cat_tier1 = []; 
         for(key in ops_cat_tier1){ 
          var obj = ops_cat_tier1[key]; 
          d.ops_cat_tier1.push(obj);           
         } 
        } 
        pou_id = $(".js-basic-multiple-pou").val(); 
        if(pou_id && pou_id.length > 0){ 
         d.pou_id = []; 
         for(key in pou_id){ 
          var obj = pou_id[key]; 
          d.pou_id.push(obj);           
         } 
        } 
        customer_ref = $(".js-basic-multiple-customer_ref").val(); 
        if(customer_ref && customer_ref.length > 0){ 
         d.customer_ref = []; 
         for(key in customer_ref){ 
          var obj = customer_ref[key]; 
          d.customer_ref.push(obj);           
         } 
        } 
        incident_id = $(".js-basic-multiple-incident").val(); 
        if(incident_id && incident_id.length > 0){ 
         d.incident_id = []; 
         for(key in incident_id){ 
          var obj = incident_id[key]; 
          d.incident_id.push(obj);            
         } 
        } 
        impact = $(".js-basic-multiple-impact").val(); 
        if(impact && impact.length > 0){ 
         d.impact = []; 
         for(key in impact){ 
          var obj = impact[key]; 
          d.impact.push(obj);           
         } 
        } 
        change_id = $(".js-basic-multiple-crq").val(); 
        if(change_id && change_id.length > 0){ 
         d.change_id = []; 
         for(key in change_id){ 
          var obj = change_id[key]; 
          d.change_id.push(obj);           
         } 
        } 
        project_ref = $(".js-basic-multiple-project").val(); 
        if(project_ref && project_ref.length > 0){ 
         d.project_ref = []; 
         for(key in project_ref){ 
          var obj = project_ref[key]; 
          d.project_ref.push(obj);            
         } 
        } 
       }, 
       success : function (e){ 
        console.log(e); 
        if(!jQuery.isEmptyObject(e.error)){ 
         if (e.error.message.indexOf("Allowed memory size of") >= 0){ 
          // show error message 
          $('#alert-modal-title span').html("Details of Service Impact"); 
          $('#alert-modal-body').html("Search query is too large, please use filters to narrow results!"); 
          $('#alert-modal').modal('show'); 
          $(".dataTables_empty").html("Search query is too large, please use filters to narrow results!"); 
          $("#table_impact_processing").hide(); 
         } 
         console.log(e.error); 
        } 
        //table_impact.draw(); 
       }, 
       "error": function(e) { //404 errors and the like wil fall here 
        //"throw new Error('Some error')" 
        console.log(e); 
       } 
      }, 
      columns: [ 
        { "data": "CHANGE_ID" }, 
        { "data": "SCHEDULED_START_DATE_GMT" }, 
        { "data": "SCHEDULED_END_DATE_GMT" }, 
        { "data": "POU_ID" }, 
        { "data": "SUMMARY" }, 
        { "data": "STATUS" }, 
        { "data": "COMPANY" }, 
        { "data": "CUSTOMER_PID" }, 
        { "data": "SITE_GROUP" }, 
        { "data": "SERVICE_STATUS" }, 
        { "data": "CIRCUIT_ID" }, 
        { "data": "ADDRESS" }, 
        { "data": "SERVICE_IMPACT" }, 
        { "data": "SERVICE_TYPE" }, 
        { "data": "SERVICE_MODEL" }, 
        { "data": "OTHER_REF" }, 
        { "data": "TAIL_REF" }, 
        { "data": "KEY_OWNER" }, 
        { "data": "RECEIVES_COMMS" }, 
       ],   
     }); 

私が成功部分を削除した場合、データは上手く描画されます。

Answer 1

私は、エラーを探していたので、私はこの `ajax`オプションはjQueryのの` ajax`ないと思う部分

table_impact = $('#table_impact').DataTable({ 
     dom: 'lBfrtip', 
     buttons: [ 
      { 
       extend: 'copyHtml5', 
       text:  '<i class="fa fa-clipboard" aria-hidden="true"></i>', 
       titleAttr: 'Copy' 
      }, 
      , { 
       extend: 'excelHtml5', 
       title: 'Summary of Changes', 
       text: '<i class="fa fa-file-excel-o"></i>', 
       titleAttr: 'Excel' 
      } 

     ], 
     'bDestroy': true, 
     "bInfo": true, 
     "bProcessing": true, 
     "bDeferRender": true, 
     'iDisplayLength': 10, 
     "oLanguage": { 
     }, 
     "bSort": false, 
     searchHighlight: true, 
     fixedHeader: true, 
     'bScrollCollapse': true, 
     'sScrollX': '100%', 
     'scrollX': true, 
     scrollCollapse: true, 
     ajax: { 
      url: base_url + 'api/change/self-serve', 
      type: "POST", 
      data : function(d){ 
       d.line_type = 'fixed'; 
       d.action = "impact"; 
       if($("#group_period label.active").data("value") == null){ 
        d.period = "custom"; 
        d.period_custom = $("#reportrange span").html(); 
       }else{ 
        d.period = $("#group_period label.active").data("value"); 
       } 


      }, 
      /*success : function (e){ 
       console.log(e); 

       table_impact.draw(); 
      },*/ 
      "error": function(e) { //404 errors and the like wil fall here 
       //"throw new Error('Some error')" 
       var error = JSON.parse(e.responseText); 
       if(!jQuery.isEmptyObject(error.error.message)){ 
        if (error.error.message.indexOf("Allowed memory size of") >= 0){ 
         // show error message 
         $('#alert-modal-title span').html("Details of Service Impact"); 
         $('#alert-modal-body').html("Search query is too large, please use filters to narrow results!"); 
         $('#alert-modal').modal('show'); 
         $(".dataTables_empty").html("Search query is too large, please use filters to narrow results!"); 
         $("#table_impact_processing").hide(); 
        } 
       }else{ 
        $('#alert-modal-title span').html("Details of Service Impact"); 
        $('#alert-modal-body').html("An error has occured, please contact Support"); 
        $('#alert-modal').modal('show'); 
        $(".dataTables_empty").html("An error has occured, please contact Support"); 
        $("#table_impact_processing").hide(); 
       } 
      } 
     }, 
     initComplete: myCallBack 
    });