从 Cakephp 中的 jQuery ajax 响应重新生成数据表

Question

首先，我有一个数据表，其中包含我的索引视图的信息和操作。 我从 3 个下拉列表中创建了一个命名数组“条件”。 单击搜索按钮后，ajax 根据“条件”数组从控制器的搜索方法返回响应。

只是我需要将 Jquery 的 AJAX 返回的“响应”（命名为数据）加载到我的 index.ctp 上已经初始化的数据表中

我使用的是 Cakephp 2.6.9

Jquery 的 Ajax 调用：

jQuery("#search").on( "click", function () {
    jQuery.ajax({
        method: "POST",
        url: "'.Router::url(array('action'=>'search','ext'=>'json'),true).'",
        data: conditions, //JS named array to controller search() method 
        success: function(data) {
                    console.log(data); //here data received successfully just need to regenerate dataTable
                    dataTable.clear().destroy();
                    dataTable.data(data); //here I want to regenerate the dataTable with data parameter but I can't
                    console.log("data loaded into datatable!");
                },
        });
});

以 JSON 格式成功接收到 Ajax 响应。只是我需要使用该函数的“数据”参数重新生成数据表。

这是我稍后在 index.ctp 页面上初始化的数据表

var dataTable=jQuery("#data-table").dataTable({
                "order": [[1,"asc"]],
                "columnDefs": [
                                { "width": "5%", "targets": 0 },
                                { "width": "9%", "targets": 4 },
                                { "width": "9%", "targets": 5 },
                                { "width": "9%", "targets": 6 },
                                { "width": "9%", "targets": 7 },
                                { "width": "9%", "targets": 8 }
                            ],
                "displayStart":0,
                "pageLength":'.$this->Paginator->param('limit').',
                "lengthSparePart": [ 20, 25, 50, 100, 500 ],
                "autoWidth": false,
                "processing": true,
                "serverSide": true,
                "stateSave": true,
                "pagingType": "full_numbers",
                "language": '.$this->DataTable->getLanguages().',
                "ajax": "'.Router::url(array('action'=>'index','ext'=>'json'),true).'",
                "columns": [
                    {"data" : "SparePart.id"},
                    {"data" : "SparePart.name"},
                    {"data" : "SparePart.part_no"},
                    {"data" : "SparePart.location"},
                    {"data" : "SparePart.balance_qty"},
                    {"data" : "SparePart.target_qty"},
                    {"data" : "SparePart.balance_qty"},
                    {"data" : "SparePart.sell_price", "orderable" : true, "searchable" : false},
                    {"data" : "SparePart.current_rate"},
                    {"data" : null,"searchable" : false, "orderable" : false},
                    {"data" : "SparePart.isactive", "orderable" : true, "searchable" : false},
                    {"data" : null, "orderable" : false, "searchable" : false},
                    {"data" : "VehicleMaker.name"},
                    {"data" : "VehicleBrand.name"},
                    {"data" : "VehicleModel.name"},
                ],
                "rowCallback": function( row, data, displayIndex ) {
                    jQuery("td", row).addClass("text-center");
                    if(data["SparePart"]["isactive"]==true){
                        jQuery("td:eq(10)", row).html("<a href=\'"+projectBaseUrl+"spareParts/active/"+data["SparePart"]["md5_id"]+"\' class=\'btn-sparePart-status\'><div class=\'btn-group\'><button type=\'button\' class=\'btn btn-success btn-xs active\'>'.__d('label','ON').'</button><button type=\'button\' class=\'btn btn-default btn-xs inactive\'>'.__d('label','OFF').'</button></div></a>");
                        jQuery("td:eq(11)", row).html("<a href=\'"+projectBaseUrl+"partsStocks/index/"+data["SparePart"]["md5_id"]+"\' class=\'btn btn-success btn-xs \' >'.__d('label','ADD_QTY').'</a>  <a href=\'"+projectBaseUrl+"spareParts/insert/"+data["SparePart"]["md5_id"]+"\' class=\'btn btn-success btn-xs btn-sparePart-edit\'>'.__d('label','EDIT').'</a>");
                    }else{
                        jQuery("td:eq(10)", row).html("<a href=\'"+projectBaseUrl+"spareParts/active/"+data["SparePart"]["md5_id"]+"/1\' class=\'btn-sparePart-status\'><div class=\'btn-group\'><button type=\'button\' class=\'btn btn-default btn-xs inactive\'>'.__d('label','ON').'</button><button type=\'button\' class=\'btn btn-danger btn-xs active\'>'.__d('label','OFF').'</button></div></a>");
                        jQuery("td:eq(11)", row).html("<a href=\'"+projectBaseUrl+"spareParts/insert/"+data["SparePart"]["md5_id"]+"\' class=\'btn btn-success btn-xs btn-sparePart-edit\' data-title=\'"+data.SparePart.name+"\'>'.__d('label','EDIT').'</a> <a href=\'"+projectBaseUrl+"spareParts/delete/"+data["SparePart"]["md5_id"]+"\' class=\'btn btn-danger btn-xs btn-sparePart-delete\'>'.__d('label','DELETE').'</a>");
                    }

                    if (data["SparePart"]["balance_qty"] < data["SparePart"]["target_qty"]) {
                         if (data["FutureOrder"] == "") {
                            jQuery("td:eq(11)", row).prepend("<a href=\'"+projectBaseUrl+"futureOrders/index/"+data["SparePart"]["md5_id"]+"\' class=\'btn btn-warning btn-xs \' >'.__d('label','ORDER').'</a> ");
                        }else {
                            jQuery("td:eq(11)", row).prepend("<span class=\'btn btn-info btn-xs \' >'.__d('label','ORDERED').'</span> ");

                        }
                        jQuery("td:eq(6)", row).html(data["SparePart"]["target_qty"] - data["SparePart"]["balance_qty"]);
                    } else {
                        jQuery("td:eq(6)", row).html(0);
                    }

                    jQuery("td:eq(9)", row).html(data["VehicleBrand"]["name"]+" / "+ data["VehicleBrand"]["name"]+" / "+data["VehicleModel"]["name"]);

                    return row;
                },
                "initComplete":function( settings, json ) {
                    jQuery("<button class=\'btn btn-default btn-sparePart-refresh\'>'.__d('label','REFRESH').'</button>&nbsp;").prependTo("#data-table_length");
                    jQuery("<a href=\'"+projectBaseUrl+"spareParts/insert\' class=\'btn btn-default btn-sparePart-add\' data-title=\''.__d('title','NEW_SPARE_PART').'\'>'.__d('label','ADD').'</a>&nbsp;").prependTo("#data-table_length");

                    var dataTable=settings.oInstance.api();
                    var stateDataTable= dataTable.state.loaded();
                    jQuery(".btn-sparePart-refresh, .btn-sparePart-add").click(function(e){
                        jQuery("#flashMessage").remove();
                        dataTable.state.clear();
                        dataTable.order([[1,"asc"]]);
                        dataTable.sort(stateDataTable);
                        dataTable.search("toyota");
                    });
                    jQuery(".btn-sparePart-refresh").click(function(e){
                        dataTable.ajax.reload();
                    });
                }
            }).api();

Answer 1

除非您更改配置选项，否则我建议不要破坏数据表。我认为解决错误的第一个问题是我认为您在这行中遇到的错误：

dataTable.clear().destroy();

我怀疑你看到了这个错误：

TypeError: dataTable.clear is not a function

如果是这样，那么你需要改变这个：

var dataTable=jQuery("#data-table").dataTable({

到这里：

var dataTable=jQuery("#data-table").DataTable({

请注意 DataTable 中的大写字母 D。有关信息，请参阅第一个 FAQ。

如果ajax函数中的数据结构与初始数据相同，我建议使用rows.add()而不是destroy。改变这个：

dataTable.clear().destroy();
dataTable; //here I want to regenerate the dataTable with data parameter but I can't

到这里：

data = JSON.parse(data);  //You are probably receiving a JSON string
dataTable.clear();
dataTable.rows.add(data.data).draw();  //You are probably receiving your data in a "data" object