Question

我正在使用嵌套数据表来显示某个部门的投诉列表。默认情况下，从数据库中提取所有类别投诉。这工作正常。

当我更改下拉列表并选择其他类别时，数据表不会加载新值。在浏览器控制台上收到以下错误。

从数据库中获取数据的JS代码：

//get complaint data from database
    function getComplaintData(){
        var cat = $("#mainCategory").val();            
        $.ajax({
                url: 'getComplaintData',
                type: 'POST',                   
                data:{ "userLogged":"admin","category":cat},
                success: function (data) {                         
                    assignToEventColumns(data); //bind to datatable             
                    bindDetails(); //bind to nested table of datatable
                }                   
        });            

    }       
   $(function(){            
        getComplaintData();           
           // Add event listener for opening and closing details              
    });



var table;
//assign complaint data to datatable
function assignToEventColumns(response){         
var complaintId,complaintDt;

 table = $('#dtMyComplaints').DataTable({ 
  destroy: true,
  "processing": true,
  "data":response.data,
  "columns": [
    {
        "className": 'details-control',                     
        "orderable": false,
        "data": null,
        "defaultContent": '',
        "render": function () {
                    return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                },
        "width":"20px"
    },
    { "data": "headerId" },
    { "data": "openingDt",
       render: function ( data, type, row ) {                               
                    return formatDate(data);
               } 
    },
    { "data": "catName" },
    { "data": "itemName" },
    { "data": "workList.0.remarks"},
    { "data":"status",
        render:function(data,type,row){
            return data=="C"?"Closed":"In-Progress";
        }
    },
    {
        "data": null,
        "defaultContent":'',
        "render": function ( data, type, row ) {  
                complaintId = data.headerId;
                complaintDt = formatDate(data.openingDt);
                if(data.status=="C"){
                    return "";
                }else{
                    return "<p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' data-complaintid='"+complaintId +"' data-complaintdt ='"+complaintDt+"' ><span class='glyphicon glyphicon-pencil'></span></button></p>";
                }
            }        
    },
    {"data":"item",visible:false,targets:[8]},
    {"data":"category",visible:false}
    ]                   
});

}

来自数据库的响应格式为：

{"data":[{"empid":"A1359","status":"A","catName":"CARPENTRY","itemName":"Door Repair","headerId":3,"quarter":4,"item":4,"category":4,"priority":4,"openingDt":"May 15, 2018 3:48:18 PM","workList":[{"id":4,"headerId":3,"remarks":"mesh on front door","updatedBy":"admin","updatedDt":"May 15, 2018 3:48:18 PM"},{"id":5,"headerId":3,"remarks":"assigned to Vikas for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:41:58 PM"},{"id":6,"headerId":3,"remarks":"for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:42:44 PM"},{"id":7,"headerId":3,"remarks":"test edit","assignedTo":"B1179","updatedBy":"admin","updatedDt":"May 16, 2018 12:43:10 PM"},{"id":8,"headerId":3,"remarks":"test edit","assignedTo":"B2874","updatedBy":"admin","updatedDt":"May 16, 2018 12:45:06 PM"},{"id":9,"headerId":3,"remarks":"test","assignedTo":"B2008","updatedBy":"admin","updatedDt":"May 16, 2018 12:46:33 PM"},{"id":10,"headerId":3,"remarks":"test closing Closing the complaint!","updatedBy":"admin","updatedDt":"May 16, 2018 2:08:25 PM"}]},{"empid":"A1439","status":"A","catName":"WATER","itemName":"Pipe leakage","headerId":2,"quarter":3,"item":3,"category":2,"priority":2,"openingDt":"May 4, 2018 8:12:44 AM","workList":[{"id":2,"headerId":2,"remarks":"Leakage in Bathroom Pipe","updatedBy":"admin","updatedDt":"May 4, 2018 8:15:28 AM"},{"id":3,"headerId":2,"remarks":"Started working - Plumber will arrive by today evening","assignedTo":"C4224","updatedBy":"admin","updatedDt":"May 4, 2018 8:16:32 AM"}]},{"empid":"A1359","status":"C","catName":"ELECTRICAL","itemName":"Bulb","headerId":1,"quarter":1,"item":1,"category":1,"priority":3,"openingDt":"May 1, 2018 3:39:07 PM","workList":[{"id":1,"headerId":1,"remarks":"Bulb not woking","updatedBy":"A1359","updatedDt":"May 1, 2018 3:41:44 PM"}]}]}

Answer 1

如果存在，则需要销毁数据表。

if (mytable !== null ) {      
        $('#dtMyComplaints').DataTable().destroy();
        mytable = null;
        // empty in case the columns change
        $('#dtMyComplaints').empty();
    }

然后创建数据表的代码。

  table = $('#dtMyComplaints').DataTable({ ......});

数据表：未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的

1 个答案: