dataTables使< tr>点击链接 [英] dataTables make <tr> clickable to link

问题描述

我在 http://communitychessclub.com/test.php

我的问题是我需要使整个表格行都可单击以基于游戏#的链接.该表列出了游戏，用户应单击一行并加载实际游戏.

我无法理解该问题的先前解决方案.有人可以简单地解释一下吗?

我以前是在 http://communitychessclub.com/games.php 上进行此操作的(但该版本太冗长，是否用php echo写入磁盘)

echo "<tr onclick=\"location.href='basic.php?game=$game'\" >"; 

<script>$(document).ready(function() {
$('#cccr').dataTable( {
    "ajax": "cccr.json",

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

    "columns": [
        { "data": "game" },
        { "data": "date" },
        { "data": "event" },
        { "data": "eco" },
        { "data": "white_rating" },
        { "data": "white" },
        { "data": "black_rating" },
        { "data": "black" }
    ]
    } );
  } );</script>

"cccr.json"看起来像这样，很好:

{
"data": [
{
"game": "5086",
"date": "09/02/2013",
"event": "135th NYS Ch.",
"eco": "B08",
"white": "Jones, Robert",
"white_rating": "2393",
"black": "Spade, Sam",
"black_rating": "2268"
},
...

解决方案

您可以这样做:

使用fnRowCallback将游戏ID数据属性添加到您的数据表行

...
    { "data": "black" }
    ],
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            //var id = aData[0];
            var id = aData.game;
            $(nRow).attr("data-game-id", id);
            return nRow;
        }

这将为表中的每一行提供一个游戏ID属性，例如:

<tr class="odd" data-game-id="5086">

然后为click事件创建一个JavaScript侦听器，并重定向到游戏页面，并传递从tr数据属性中获取的游戏ID:

$('#cccr tbody').on('click', 'tr', function () {
   var id = $(this).data("game-id");
   window.location = 'basic.php?game=' + id;
}

I have a dataTables table at http://communitychessclub.com/test.php

My problem is I need to make an entire table row clickable to a link based on a game#. The table lists games and user should click on a row and the actual game loads.

I am unable to understand the previous solutions to this problem. Can somebody please explain this in simple terms?

I previously did this at http://communitychessclub.com/games.php (but that version is too verbose and does disk writes with php echo) with

echo "<tr onclick=\"location.href='basic.php?game=$game'\" >"; 

<script>$(document).ready(function() {
$('#cccr').dataTable( {
    "ajax": "cccr.json",

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

    "columns": [
        { "data": "game" },
        { "data": "date" },
        { "data": "event" },
        { "data": "eco" },
        { "data": "white_rating" },
        { "data": "white" },
        { "data": "black_rating" },
        { "data": "black" }
    ]
    } );
  } );</script>

"cccr.json" looks like this and is fine:

{
"data": [
{
"game": "5086",
"date": "09/02/2013",
"event": "135th NYS Ch.",
"eco": "B08",
"white": "Jones, Robert",
"white_rating": "2393",
"black": "Spade, Sam",
"black_rating": "2268"
},
...

解决方案

You can do it this way:

Use fnRowCallback to add a game-id data-attribute to your datatable rows

...
    { "data": "black" }
    ],
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            //var id = aData[0];
            var id = aData.game;
            $(nRow).attr("data-game-id", id);
            return nRow;
        }

This will give each row in your table a game id attribute e.g:

<tr class="odd" data-game-id="5086">

Then create a javascript listener for the click event and redirect to the game page passing the game id taken from the tr data-attribute:

$('#cccr tbody').on('click', 'tr', function () {
   var id = $(this).data("game-id");
   window.location = 'basic.php?game=' + id;
}

这篇关于dataTables使< tr>点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！