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

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

hernandohernando Posts: 10Questions: 3Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954
    edited March 2021 Answer ✓

    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

  • hernandohernando Posts: 10Questions: 3Answers: 0

    Thanks,It work for me.

  • hernandohernando Posts: 10Questions: 3Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    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

  • hernandohernando Posts: 10Questions: 3Answers: 0

    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.

  • hernandohernando Posts: 10Questions: 3Answers: 0

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

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    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

  • hernandohernando Posts: 10Questions: 3Answers: 0

    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}
    },

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    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

  • hernandohernando Posts: 10Questions: 3Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954
    edited March 2021

    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

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

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

    Kevin

  • hernandohernando Posts: 10Questions: 3Answers: 0

    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.

This discussion has been closed.