Datatable Ajax 接收数据 success/complete (Laravel)

Question

我正在尝试使用 ajax 在客户端从控制器接收数据，但实际情况是当我在 ajax 中使用 complete function 但当我使用 [=16= 时，我收到了数据并在 table 中显示]数据没有显示在table。据我所知，成功功能比完整功能更早开始，我想使用成功来显示一些警报，如果我将成功警报放在 complete function 中，它甚至会显示 error function被执行。

当我将两个函数完成 return 数据并成功显示警报时，数据未显示在 table

Ajax

//...

  $('#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'},
                     
        });

成功功能的响应预览（table 中不显示）

完整功能的响应预览（如 table 所示）

两者的数据相同

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

Console log打印完整函数中的数据

另外，两者是一样的

控制器

我通过 Facade

使用来自 yajrabox and return collection 的数据 table

//...

 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.

有什么办法既能起诉成功又能完成在table中获取数据？

任何帮助，请

谢谢大家

Answer 1

使用 DataTables ajax 选项时，不应使用 success 函数。

见 ajax.dataSrc 说明了这一点：

"the success option of ajax should not be altered - DataTables uses it internally to execute the table draw when the data load is complete".

改用 ajax.dataSrc 选项。

Datatable Ajax 接收数据 success/complete (Laravel)

Datatable Ajax receive data with success/complete (Laravel)

php

ajax

datatable

jquery

laravel