Adding a button in a row an getting data from that row

tsurubaso · December 2021

Link to test case:

Debugger code (debug.datatables.net):

            var table = $('#searchTable').DataTable({
                data: datatransformed,
                columns: [
                    { title: "Word" },
                    { title: "Nature" },
                    { title: "Definition" },
                    { title: "Prononciation" },
                    { 'data': null, title: 'Action', wrap: true, "render": function () { return '<div class="btn-group"> <button type="button" onclick=" rowDataGet () " class="btn btn-light" >Memo</button></div>' } },
            
        ]
    });
}

//function to write actual data of a table row
function rowDataGet () {
    console.log( table.row( this ).data() );
}

Error messages shown:

index.html:1 Uncaught ReferenceError: table is not defined
    at HTMLButtonElement.onclick (index.html:1)

Description of problem:
the value table is not recognize

Hello to all, I hope you are all fine.
I try to get the data from the row without success.

tsurubaso · December 2021

I changed it a bit, not working either, but continuing to try.

function drawDataSearchTable( datatransformed) {

    var table=undefined;

table=  $('#searchTable').DataTable({
        data: datatransformed,
        columns: [
            { title: "Word" },
            { title: "Nature" },
            { title: "Definition" },
            { title: "Prononciation" },
            { 'data': null, title: 'Action', wrap: true, "render": function () { return '<div class="btn-group"> <button type="button" onclick=" rowDataGet () " class="btn btn-light" >Memo</button></div>' } },
            
        ]
    }).data;

    return table
}

//function to write actual data of a table row
function rowDataGet (table) {

    
    //for row data
    console.log(table.row( $(this).parents('tr')[0]).data().id);
   
}

Error message:

renderer.js:113 Uncaught TypeError: Cannot read properties of undefined (reading 'row')
    at rowDataGet (renderer.js:113)
    at HTMLButtonElement.onclick (index.html:1)

colin · December 2021

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

tsurubaso · December 2021

Thanks you very much Colin for your kind answer!!
Greatly appreciated your support.
I am not working on website, I am doing node.js/electron app.
I will link next time to a fiddle.

I found a way to solve my problem.

This is not clean, but all the rest was unsuccessful.

Then I share but there is surely a better way.


function drawDataSearchTable( datatransformed) {

    $('#searchTable').DataTable({
        data: datatransformed,
        columns: [
            { title: "Word" },
            { title: "Nature" },
            { title: "Definition" },
            { title: "Prononciation" },
            {title:  "Action",
            "render": function(data, type, full) { return '<div class="btn-group"> <button type="button" id="'+full+'" onclick=" rowDataGet (this.id) " class="btn btn-light" >Memo</button></div>'  },
        }
        
     ]
    })

}
//function to write actual data of a table row
function rowDataGet (e) {
    console.log(e)

    
    
   
}

kthorngren · December 2021

Cannot read properties of undefined (reading 'row')

This is a scoping issue. The table variable is not in scope (not available) in the rowDataGot function so you are getting the undefined error. You can get an instance of the API in the rowGetData function as described in the API docs. Use var table = $('#searchTable').DataTable(); inside the function.

Kevin

tsurubaso · December 2021

OK,
I am coming back, my unclean solution is just impossible to use.
Every comma is a separator. In a dictionary (my app) it's just a comma party. The number of columns will have no consistency.
I will look into your advice Kevin.
Thanks!!

kthorngren · December 2021

Its not clear what the problem is. Please provide a link to your page or create a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You might have better luck using delegated events as shown in this example. Here is an example of buttons in the rows that uses delegated events:
http://live.datatables.net/qemodapi/506/edit

Kevin

tsurubaso · December 2021

Ok Kevin, I think you saved my day!!
I am happy!!
working like a charm!

tsurubaso · December 2021

I was so happy the form was perfect, immediately reusable! but...
Only the row[0] was displayed.
What ever button I clicked.
I checked the formula, it look like good.
But not working.

//function to write actual data of a table row

function rowDataGet () {
 
    var table = $('#searchTable').DataTable();
    //for row data
    var rowIndex= table.row(this).index()
    //console.log(rowIndex) ///it give me undefined
    console.log(table.row( $(this).parents('tr')[rowIndex]).data());///data of row[0]
    
}

tsurubaso · December 2021

Hello, I put all code in a fiddle electron
https://gist.github.com/083976ef44d73d29f799ea3c7d198529
I hope this will help.

tsurubaso · December 2021

Hello again,
I found the solution, I guess...
It was simple, like all big mistakes I had to look at the manual to do things properly.

//functions related to dataTables

function drawDataSearchTable( datatransformed) {
 
$('#searchTable').DataTable({
        data: datatransformed,
        columns: [
            { title: "Word" },
            { title: "Nature" },
            { title: "Definition" },
            { title: "Prononciation" },
            { 'data': null, title: 'Action', "render": function () { return '<div class="btn-group"> <button type="button" onclick=" rowDataGet () " class="btn btn-light" >Memo</button></div>' } },
             
        ]
    });
}

//function to write actual data of a table row
function rowDataGet () {
    temp=undefined;

    //for row data
 
    $('#searchTable tbody').on( 'click', 'tr', function () {
    temp= $('#searchTable').DataTable().row( this ).data() ;
    console.log( temp );


} );
    
}

But I don't understand why, the good data, the one of the clicked row is returned, but, first click, one copy, second click 2 copies, third click 3 copies and so on.

kthorngren · December 2021

The reason is each time you click the button you are calling the function rowDataGet which is creating a new/additional click event.

Did you look at the example I provided?
http://live.datatables.net/qemodapi/506/edit

It removes the DOM0 event (onclick) and just uses delegated events.

Kevin

tsurubaso · December 2021

Hello Kevin and thanks again,
I did look at what it but without seeing or understanding it.
Then, I followed your advice, and got ride of the rowDataGet, and imitated the settings.
Working like a charm.

function drawDataSearchTable( datatransformed) {

$(document).ready( function () {
 
$('#searchTable').DataTable({
        data: datatransformed,
        columns: [
            { title: "Word" },
            { title: "Nature" },
            { title: "Definition" },
            { title: "Prononciation" },
            { 'data': null, title: 'Action', "render": function (data, type, row, meta) { return '<div class="btn-group"> <button type="button" class="btn btn-light" >Memo</button></div>' } },
             
        ]
    });


//function to write actual data of a table row
$('#searchTable tbody').on( 'click', 'tr', function () {
    var tr = $(this).closest('tr');
    var data =$('#searchTable').DataTable().row( tr ).data();
    console.log(data);
} );

});

};

Adding a button in a row an getting data from that row

Adding a button in a row an getting data from that row

Answers

Howdy, Stranger!

Categories

DataTables

Adding a button in a row an getting data from that row

Adding a button in a row an getting data from that row

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables