Datatable destroy function not working as expected

dalps

Hello everybody

I'm trying to implement a web app, with a Basic and an Advanced Search, and I'm using datatable 1.10 to display the results of the searches. I'm having issues with the destroy method and I hope that some of you it is going to be able to help me find a solution, thanks in advance to all for your help

Let me explain a little bit my project, code logic, objective and issue:

I have one single table with 5 columns as you can see on my jsfiddle. I also have a global variable "table" to handle the datatable (DT) once it is created. I declared a function "loadSearchData" to load the parameters for the Ajax call on another global variable. On the click event of my two Search buttons I check if the DT already exists then I destroy it, and then I call the function "initializeDataTable". My idea was to destroy the existing DT and create a new one each time the Search buttons are clicked. However it is not working, and the behavior is "weird":

First time I enter the search criteria and click search, works perfectly fine
If I modifiy the search criteria and click search again, then I get a Webpage error

"Line: 1
Error: Unable to get property 'style' of undefined or null reference"

Then, if don't debug and click the search button again, then it works perfectly fine again!

I'm sure there is a better way to do this, this is my first time using datatables and probably I'm missing something, anyone have any idea?

You can see the jsfiddle here

https://jsfiddle.net/dalps/gxgLdo03/

thanks in advance

dalps

allan

Hi dalps,

You have five columns defined in the HTML but six in the columns array. I suspect that is the issue as they need to match.

Allan

dalps

Hello allan

Thanks for your answer, thing is that I'm getting six columns in the array but only showing 5, in the "columnDefs" I have:

"targets": 5,
"data": "active",
"visible": false

I though that this will match the table columns count with the columns array, I'm wrong?

allan

"targets": 5

Is visible column 6. The target count is zero indexes.

You need the columns defined in the HTML to match that in the Javascript.

Allan

dalps

You were totally right, my misunderstanding was with the "columnDefs" property, that refers to the columns on the html table and not with the columns on the array, I added a new column to the table and it worked perfectly, thanks again wise man!!!