Question

我的600张国际象棋比赛的数据表太慢了。我用php写出了表格数据。我改为使用ajax，它现在渲染得更快。

我想基于“游戏”点击一行，并隐藏“游戏”字段。

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

我的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>

某种编码员向我展示了如何使“游戏”字段可点击。但是我想要隐藏游戏区域并使整个行可以点击：

basic.php?game=5579

Answer 1

您可以添加createdRow回调：

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

row保存呈现的<tr>元素，data保存JSON项。以上内容将game值添加到<tr>元素作为属性。之后，对dataTable行实施一个单击处理程序，负责重定向：

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

您可以通过{ "data": "game", visible : false }

隐藏游戏专栏

dataTables ajax json数据成为可点击的行

1 个答案: