How to get tr values onclick in datatables

JavaScript
1

I am trying to get #cccr TBODY TR TD[0] value from my website datatables table. I want user to click on a TR, get the value from a hidden TD in that TR.

I had gridjs.js working, but my DataTables version in much nicer.

https://verlager.pro/showcase.php?player=capp

<script>
$(document).ready(function() {
 $('#cccr').DataTable({columns: [ { data: 'game' },
 { data: 'Date' }, { data: 'Event' }, { data: 'ECO' }, 
{ data: 'White' }, { data: 'W_elo' }, { data: 'Black' }, 
{ data: 'B_elo' }, { data: 'Result' } ],

ajax: 'assets/games.json', responsive: true,

columnDefs: [{ visible: false, targets: 0 }], 
"search": {"search": player},

sort: true, stateSave: false, bPaginate: false, 
bLengthChange: true, bFilter: true, 
bInfo: true, sPaginationType: "full_numbers", 
sScrollY: "25rem", responsive: true, 
bAutoWidth:true, autoWidth: true

});
});
 </script>

I have tried many solutions, none work.

Anyone have a solution?

2

catch the table into a variableā€¦
let table = $('#cccr').DataTable( .....

bind a delegated event to it.
table.on('click', 'tbody tr', function() {

You can then get the Datatable data for the row:
table.row(this).data() ā† Yields Array

1 Like
3

I canā€™t get your code to integrate with the beginning of my DataTables init script. I canā€™t add a new table spec definition after previously defining and creating the #cccr datatable.

Specifically, how do I replace:


<script>
$(document).ready(function() {

with


<script>
let table = $('#cccr').DataTable( 
table.on('click', 'tbody tr', function() {`
table.row(this).data()


Please try to be precise and illustrative as I am 
not real good with js document ready function.
4

I didnt tell you to replace that. So i am being precise. Youā€™re introducing words I didnt say.

You have a datatable declaration that begins $('#cccr').DataTable. Catch THAT. Not create a new one, catch ā€œthe tableā€ (hey look, precise language - singular table.)

Within the outer layer of the ready function, you can then use the variable you created. Because thatā€™s how variable scope works.

So within the ready function, and after youā€™ve created the variable by catching the table, modify that variable to attach an event to it with the .on command.

Iā€™m not going to give you every curly brace and parenthesis here - if you dont understand you need to close everything and define your own function for the on, youā€™re not at the point that you should be messing with this.

Within the function called by the on, you can use .row(this), which is a method of the table variable, to get a Datatables representation of the row that corresponds to the row that was clicked on.

A Datatables representation of a row has a method, .data(), that yields a numeric array containing all of the data that the table is holding for that row. If the data youā€™re trying to use isnt part of the Datatables setup for some reason (but it should), this inside the function will be a pointer to the row, and you can use regular jquery methods to extract/modify what you need.

5 
<script>
$(document).ready(function() {
 $('#cccr').DataTable({....}

function click_ROW () {
let table = $('#cccr').DataTable( 
table.on('click', 'tbody tr', 
function() {table.row(this).data(); alert (table[0]);}
));}

click_ROW ();

});

/*AND THIS JS CODE ABOVE GENERATES AN ERROR
jQuery.Deferred exception: Cannot access ā€˜tableā€™ before initialization
ReferenceError: Cannot access ā€˜tableā€™ before initialization

Can you please help?

6

Soā€¦ more things that were not told to be done are appearing.

I said do 3 things:

<script>
$(document).ready(function() {
let table = $('#cccr').DataTable({....});
});

Period. End of sentence. I cant make this any more obvious.

<script>
$(document).ready(function() {
let table = $('#cccr').DataTable({....});
table.on('click', 'tbody tr', function() { ... });
});

<script>
$(document).ready(function() {
let table = $('#cccr').DataTable({....});
table.on('click', 'tbody tr', function() {
    ...
    whateveryourfunctionwantstodo
    console.log(table.row(this).data()[0]) 
    ...
 });
});
8

Thank you, benabousoussou, for actually solving my web page datatables js question. I appreciate it very much!

9

ā€¦
Right.

Best of luck for the future then.

10

You, too, buddy!