php - Datatable Ajax成功/完成接收数据（Laravel）

问题描述

我正在尝试使用 ajax 从控制器接收客户端的数据，但是发生的情况是我收到了数据，当我complete function在 ajax 中使用时它显示在表中，但是当我使用时 success function，数据没有显示在表中。据我所知，成功函数比完整函数启动得早，我想用成功来显示一些警报，如果我把成功警报放进去，complete function即使在 error function执行时也会显示。

当我将两个函数都完成以返回数据并成功显示警报时，数据未显示在表格中

阿贾克斯

//...

  $('#inputForm').on('submit', function (e) {
        $("#submit").addClass("double loading");
        $("#tableLabel").show();
        e.preventDefault();
        $("#allInfoTable").DataTable({
           // processing: true,
           // serverSide: true,
            destroy: true,
            responsive: true,
            scrollX: true,
            scrollY: true,
            ordering: true,
            dom: 'QlBfrtip',
            buttons: ['colvis', 'excel', 'csv', 'print', 'copy', { extend: 'pdfHtml5',
                                                                   title: 'Revenue Report',
                                                                   orientation: 'landscape',
                                                                   pageSize: 'A4',//A0 is the largest A5 smallest(A0,A1,A2,A3,legal,A4,A5,letter))
                                                                   select: {style: 'multi'},
                                                                   exportOptions: {columns: [ 0, 1, 2, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],},
                                                                   customize: function (doc) { 
                                                                    doc.defaultStyle.fontSize = 8; //2, 3, 4, etc 
                                                                    doc.styles.tableHeader.fontSize = 8; //2, 3, 4, etc 
                                                                    doc.content[1].margin = [ -13, 0, 13,  0] //left, top, right, bottom
                                                                    },
                                                                 }],
                                                                 
                                                                 
            ajax: {

                url: $(this).attr('action'),
                type: $(this).attr('method'),
                dataType: 'json',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    Pre_Calculated_Group: $(this).find('select[name="Pre_Calculated_Group[]"]').val(),
                    Pre_Calculated_Group_Date_From: $(this).find(
                        'input[name="Pre_Calculated_Group_Date_From"]').val(),
                    Pre_Calculated_Group_Date_To: $(this).find(
                            'input[name="Pre_Calculated_Group_Date_To"]')
                        .val(),
                },
                
               
               /* complete : function (data) { // if uncomment this the alert will show but no data display in table
                    console.log(data);
                    return data;
                },*/
               success: function (reponse, textStatus, data){ //data respond here same as complete function 
                    /*console.log(reponse);
                    console.log(textStatus);*/
                    console.log(data);
                    $("#alert").hide();
                    $("#alert").slideDown("slow");
                    $("#alert").addClass("success");
                    $("#alert").find("div").text("Completed");
                    $("#alert").find("ol.ui.list").remove();
                    $("#alert").find("p").text("Done");
                    $("#submit").removeClass("double loading");             
                    //return data;

                },
               
                error: function (error) {
                   
                    $("#tableLabel").hide();
                    $("#alert").slideDown("slow");
                    $("#alert").removeClass("success");
                    $("#alert").addClass("error");
                    $("#alert").find("div").text("Failed");
                    $("#alert").find("ol.ui.list li").remove();
                    $("#submit").removeClass("double loading");
                   $.each(error.responseJSON[0], function (key, value) {
                      // console.log(value);
                       //console.log(key);
                       $("#alert").find("ol.ui.list").append("<li value='•'>" + value + "</li>");
                       switch(key) { // To display red error in each field
                          case "Pre_Calculated_Group":
                            $("#Pre_Calculated_Group").addClass("error");
                            $('body').toast({title: 'Fail',
                                        class: 'error',
                                        displayTime: 5000,
                                        showProgress: 'bottom',
                                        message: value});
                                       
                            break;
                          case "Pre_Calculated_Group_Date_From":
                            $("#Pre_Calculated_Group_Date_From").addClass("error");
                            $('body').toast({title: 'Fail',
                                        class: 'error',
                                        displayTime: 5000,
                                        showProgress: 'bottom',
                                        message: value});
                            break;
                          case "Pre_Calculated_Group_Date_To":
                            $("#Pre_Calculated_Group_Date_To").addClass("error");
                            $('body').toast({title: 'Fail',
                                        class: 'error',
                                        displayTime: 5000,
                                        showProgress: 'bottom',
                                        message: value});

                          break;  
                        }
  
                   });
                   
                }
                       
            },
            columns: [{"data": "****"}, // Sorry cannot show columns name
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      {"data": "****"},
                      ],
            deferRender: true, // To speed up the condition in case more than 50K row
            select: {style: 'multi'},
                     
        });

成功函数的响应预览（表中未显示）

完整函数的响应预览（如表所示）

两者具有相同的数据。

控制台日志打印成功函数中的数据

控制台日志打印完整功能中的数据

而且，两者都是一样的。

控制器

我使用来自yajrabox的数据表并通过 Facade返回集合

//...

 if (!empty($finalData)) {
          // dd($finalData);
            $result = new Collection;

            foreach($finalData as $k => $v){
              //--- some logic
            ]);
           
            
             return DataTables::collection($result)->toJson();
           
        } else {
            return back()->withErrors($result)->withInput($request->all())->with('Fail', 'No Data Between This Date Range.');
        }

使用 laravel 8。

有什么方法可以起诉成功并完成在表格中获取数据？

任何帮助，请

谢谢大家。

标签： phpjqueryajaxlaraveldatatable