dataTables ajax json 数据变成可点击的行答案

【问题标题】：dataTables ajax json data to become clickable rowsdataTables ajax json 数据变成可点击的行
【发布时间】：2015-12-30 10:41:30
【问题描述】：

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

我想根据“游戏”使一行可点击并隐藏“游戏”字段。

我的 JSON 结构：

{
"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

【问题讨论】：

标签： datatables

【解决方案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 }隐藏游戏栏

【讨论】：

我添加了您的代码（见上文），但它使表格崩溃。我的 createdRow 有什么错误吗？我想可能有，我对这种严格的 js 语法不干脆。
@verlager，您的 createdRow 看起来不错，请看这个小演示，我已将您的线路粘贴到其中 -> jsfiddle.net/hj49b7qq/1 - 看起来不错，希望是 @987654333更新代码中的 @ 仅用于演示。 <script>'s inside <script>'s 会使整个脚本失败。
我将您的代码复制到我的网页和上面的网页中。它似乎不起作用.. - 没有数据显示。这是为什么呢？
@verlager，我猜你的逗号太多或更少，缺少结束卷曲或类似的东西。不看代码就无法判断。你能把上面的小提琴粘贴到里面并更新吗？只是为了看看你在处理什么，肯定不是 createdRow 导致它全部崩溃，因为它与数据群没有任何关系。
@verlager，太好了！出了什么问题？顺便说一句，您可以通过添加 CSS ->#cccr tbody tr { cursor : pointer; } 为提供鼠标悬停“手”（链接通常具有）