dataTables ajax json data to become clickable rows

Question

My dataTables table of 600 chess games was too slow. I was using php to write out the table data. I instead used ajax and it renders much faster now.

I want to make a row clickable based on "game" and hide the "game" field.

MY JSON STRUCTURE:

{
"game": "5581",
"Date": "12/18/2010",
"Event": "RCC Saturday Open",
"ECO": "C00",
"White": "Nikolayev, Igor (FM)",
"WhiteElo": "2380",
"Black": "Spencer, Douglas",
"BlackElo": "1902",
"Result": "1-0"
},

MY JAVASCRIPT:

<script>

$(document).ready(function() {
 $('#cccr').DataTable( {
"createdRow": function(row, data, index) {$(row).attr('game', data.game);},

"deferRender": true,
"oSearch": {"sSearch": "<?php echo ($_GET['player']); ?>"},
 "aaSorting": [],
 "bPaginate": false,
 "bLengthChange": true,
 "bFilter": true,
 "bSort": true,
 "bInfo": true,
 "sPaginationType": "full_numbers",
 "sScrollY": "25rem",
 "responsive": true,
 "bAutoWidth":true,
 "autoWidth": true,
 "ajax": "games.ajax",
 "columns": [

  { "data": "Date" },
  { "data": "Event" },
  { "data": "ECO" },
  { "data": "White" },
  { "data": "WhiteElo" },
  { "data": "Black" },
  { "data": "BlackElo" },
  { "data": "Result" },
  { "data": "game", visible : false }
 ]

 } );

$("#cccr").on('click', 'tr', function() {
   alert('basic.php?game='+$(this).attr('game')); 

} );

</script>

Some kind coder showed me how to make the "game" field clickable. But I want to hide the game field and make the entire row clickable as in:

basic.php?game=5579

davidkonrad · Accepted Answer · 2015-10-02 09:08:51Z

1

You could add a createdRow callback :

createdRow: function(row, data, index) {
   $(row).attr('game', data.game);
}

row holds the rendered <tr> element, data holds the JSON item. The above add the game value to the <tr> element as an attribute. After that, implement a click handler to the dataTable rows that takes care of the redirect :

$("#cccr").on("click", "tr", function() {
   window.location.href = 'basic.php?game='+$(this).attr('game');
})

You can hide the game column simply by { "data": "game", visible : false }

answered Oct 2, 2015 at 9:08

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

verlager Over a year ago

I added your code (see above) but it crashed the table. Any errors in my createdRow ? I think there might be, I am not crisp with such exacting js syntax.

davidkonrad Over a year ago

@verlager, your createdRow looks fine, see this little demo where I have pasted your line in -> jsfiddle.net/hj49b7qq/1 - it looks OK, hopefully the <script> in your updated code is for demonstration only. <script>'s inside <script>'s will make the entire script to fail.

verlager Over a year ago

I copied your code into my web page and also into the above. It just doesn't seem to work.. -no data is displayed. Why is that?

davidkonrad Over a year ago

@verlager, my guess is you have a comma too much, or less, lacking a closing curly or something like that. Impossible to tell without seeing the code. Can you take the fiddle above and paste all your script code into it and update? Just to see what you are dealing with, it is certainly not createdRow that causes it all to crash since it not have anything to do with population of data.

davidkonrad Over a year ago

@verlager, great you got it to work! What was the problem? BTW, you can give the <tr>'s a mouseover "hand" (as links normally has) by adding the CSS ->#cccr tbody tr { cursor : pointer; }

Collectives™ on Stack Overflow

dataTables ajax json data to become clickable rows

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related