How to get tr values onclick in datatables

Community
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

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) 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.