get data of column "visible": false, "targets": 0

hernando

Link to test case:
https://codepen.io/hernandoglobal/pen/LYbogym

Description of problem:

I have the table showing me the data correctly, from javascript I get the data from any column, like this:

var id = $ (obj) .closest ('tr'). find ('td: nth-child (1)'). html ();

I do this from another method.

but when the column is hidden, I can't get the data.
How can I get this data, when the column is not visible?

thank you.

kthorngren

Use Datatables APIs instead, like row().data(). See this example:
http://live.datatables.net/xijecupo/1/edit

It gets the closest('tr') then uses that as the row for row().data() to get the Datatables data for the clicked row.

Kevin

hernando

Thanks,It work for me.

hernando

Hi, @kthorngren

I have an unexpected error.

Link to test case:
http://live.datatables.net/jekacate/4/watch?html,js,console,output

I have some variables for my datatable to fill.
when these variables contain information and the table is filled with data, and then I use the button to get the information from the hidden column. everything works ok.

But when because of the previous filters, "the variables" my datatable does not bring information.
show me:
"No data available in table"
it is ok. because it has no data.

then I modify the filters, I execute the function to fill the datatable, and the table is filled with information. until there, everything ok.

but when this time again I press the button to get the information from the hidden column. This no longer works.

565 Uncaught TypeError: Cannot read property 'name' of undefined
var data = table.row (row) .data (). name; <- (x)

I tried to put this line of code before filling the table, but it does nothing.

$ ('# table'). DataTable (). destroy ();

What I can do? Thank you so much.

kthorngren

I'm not able to replicate the problem with your test case. Please provide the steps to replicate the issue so we can help debug it.

Kevin

hernando

How could I reproduce the problem? since this only happens to me in my laravel project bringing files from the db? T_T would not know what to do.

hernando

Is there a way to make the table data do a destroy and then re-regenerate all the indexes or cache or something?

kthorngren

then I modify the filters, I execute the function to fill the datatable, and the table is filled with information. until there, everything ok.

We need to understand this process. How are you filling the table? If you aren't using Datatables APIs then that is the problem. See this FAQ.

Kevin

hernando

in my html view, I have two select of html.
one is to choose the day and the other to choose the date.

and I have a "search" button.

http://live.datatables.net/jekacate/5/watch?html,js,console,output

When I press the search button, this with the onclick function. captures the day and month data.
using ajax, I send the data to the controller and it returns the data to me, so that the table is filled. So:

var day = $ ('# day'). val ();
var month = $ ('# month'). val ();

var table = $ ('# table'). DataTable ({
scrollY: 200,
ajax: {
url: "{{route ('route for controller')}}",
data: {day: day, month: month} // send this data.
},

I updated the sample to be more understandable, the only thing that I did not find how to make a return from the ajax controller, but it is only this part:

ajax: {
url: "{{route ('return of laravel controller')}}",
data: {day: day, month: month}
},

kthorngren

I think I see the problem. Instead of initializing/re-initializing Datatables in the $('#btnListar').click() click event use ajax.reload() to have Datatables refresh the table data.

Init Datatables once and change your -ajax.data to be a function that fetches the input values. Something like the 2nd example in the docs.

Or if you prefer to destroy the Datatable you can try the destroy option. If that doesn't work you could use the $.fn.dataTable.isDataTable() to see if the Datatable exists and if so use the destroy() API followed by the init code.

Kevin

hernando

I had:

var table = $("#table").DataTable({
ajax: {
url: "/url_endpoint/",
data: {day: day, month: month}
},

and I change for

ajax: {
url: "/url_endpoint/",
data: function(d) {
d.day= day;
d.month= month;
}
},

I also tried with, retrieve: true,

var table = $("#table").DataTable({
retrieve: true,
serverSide: true,
ajax: {
url: "/url_endpoint/",

I also tried with, ajax.reload(), but

setInterval( function () {
table.ajax.reload();
}, 30000 );

in any case it showed me the same error. I don't know what to do, I just want to get the content of the first column, but not see it.

kthorngren

I'm not sure what all you changed. Did you move the Datatables init code outside the click handler?

I meant something more like this:
http://live.datatables.net/jekacate/5/watch?html,js,console,output

Init Datatables, create the click events. In the Search for fill datatable event just use ajax.reload(). Use the ajax.data as a function to pass the input values.

If it still gives the Uncaught TypeError: Cannot read property 'name' of undefined then you will need to debug what is undefined. Start with making sure var row = $(this).closest('tr'); returns the expected row.

Kevin

kthorngren

I adapted the example with an ajax URL, from the JS BIN environment, and it works.
http://live.datatables.net/cayomado/1/edit

Kevin

hernando

Dear @kthorngren

Infinite thanks for your help.

Finally your example helped me.
I put the creation of the table, outside any method, which will be executed from the beginning.
It is inside a div that is not seen. class = "d-none", so no problem.

and then from the button, I execute the table.ajax.reload ();

I greatly appreciate your help and your understanding of my problem.

I hope it serves as an example for other people.
Thank you so much.