TypeError: data is undefined when using jquery.datatables.min.js

Question

"I am able to see the server side ajax results, but I am receiving a JS error on screen.

There are no null values in the result.

But, the below mentioned error is thrown.

DataTables warning: table id=summaryResults1 - Requested unknown parameter 'workCategory' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

summaryTable = $('#summaryResults1').DataTable( {

                              data: tableResultsAjax,
                              serverSide: true,
                              ajax: {
                                    dataSrc: function (json) {
                                          return json.data;
                                      },
                                    "data": function(){
                                        var info = $('#summaryResults1').DataTable().page.info();

                                         $('#summaryResults1').DataTable().ajax.url(
                                                url_ajax+"&bucketCounter="+(info.page+1)
                                            );

                                    }

                              },

                              paging:true,
                              pageLength:500,
                              scrollX:true,
                              scrollCollapse: true,
                              ordering: false,
                              "scrollY": 1000,
                              "lengthChange": false,
                              "searching": false,
                              "deferRender":true,

                   "columns": [
                              { "data": "workCategory" },
                              { "data": "queue" },
                              ....

                              ],

                        columnDefs : [ {
                                "targets" : [  10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ],
                                "render" : function(data, type, row,meta) {
                                    if (type === "display" ) {
                                        param = 20-meta.col;
                                        return drilldownViewCheck?data:"<a id = 'aa' href=\"javascript:passAJAXValues('" + row.queue.code + "','" + row.task.code + "','P"+param+"','"+ row.office.code + "')\"style=\"color:#FFF;\">" + data + "</a>";
                                    }
                                }
                            },

                            ....
                          ],

                        fixedColumns:{
                              leftColumns:6
                          }





                      } );
 });

The server side response for one row is

{"recordsFiltered":750,"data":"[{....,\"workCategory\":\"Work category\",....,\"queue\":\"Queue Name\"}]","draw":2,"recordsTotal":750}

Answer 1

Technical note #4 states the problem precisely:

This will indicate that a column which uses columns.data has been unable to obtain valid data to display - for example:

{ data: 'Name' }

would produce this error if the data source object for the row had no Name parameter or the data was null or undefined.

Your response from the server-side script most likely do not have workCategory property.

In your response your data property is encoded into JSON format twice on the server, that is why DataTables is not finding any data, because data is a string and should be array.