Javascript 如何在引导数据表中创建超链接或可单击单元格？

我有一个包含数据的示例json文件：

"data" : [ 
    {
        "id": 1,
        "firstName": "Fred",
        "lastName": "Flintstone",
        "userName": "fredf"
    }, {
        "id": 3,
        "firstName": "Barney",
        "lastName": "Ruble",
        "userName": "barneyr"
    }, {
        "id": 2,
        "firstName": "Wilma",
        "lastName": "Flintstone",
        "userName": "wilmaf"
    }, {
        "id": 4,
        "firstName": "Barney",
        "lastName": "Ruble",
        "userName": "bettyr"
    },.....

HTML:

#
标题
著者
创建日期

JavaScript:

$(document).ready(function() {
    $('#user-table').dataTable({
        <!-- Retrieve a static json file, you could also have a URL to a controller method. -->
        "sAjaxSource" : "/resources/sample.json",
        <!-- Indicate to dataTable what the field names are we want, in the order we want them in the table. -->
        "aoColumns": [
                  {"data":"id"},
                  {"data": "firstName"},
                  {"data":"lastName"},
                  {"data":"userName"}
        ]
    });
});

$（文档）.ready（函数（）{
$（'#用户表'）。数据表({
“sAjaxSource”：“/resources/sample.json”，
“aoColumns”：[
{“数据”：“id”}，
{“数据”：“名字”}，
{“数据”：“lastName”}，
{“数据”：“用户名”}
]
});
});

这将成功填充表。我想让firstName列（标题）成为一个可点击的单元格或链接。它可以重定向到页面

/page/（id）

。我希望这个特定的单元格看起来与其他数据不同——比如链接或可点击的单元格

---

谢谢。

您可以像这样为特定id指定一个特定标识符

<th id="44" class="clickablename"> </th>

JQuery提供了从第一个单元格获取ID的示例：

---

编辑：请注意，这是未经测试的伪代码。

您可以为该特定id指定一个特定标识符，如下所示

<th id="44" class="clickablename"> </th>

JQuery提供了从第一个单元格获取ID的示例：

编辑：请注意，这是未经测试的伪代码。

请查看以下内容： “数据表”实现所需功能的方法是使用列渲染器

$('#example').DataTable( {
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return "<a href='whatever/" + row[0]+"'>"+row[1]+"</a>";
                },
                "targets": 1
            },
            { "visible": false,  "targets": [ 0 ] }
        ]
    } );

$（'#示例'）。数据表（{
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
返回“”；
},
“目标”：1
},
{“可见”：false，“目标”：[0]}
]
} );

看看这个： “数据表”实现所需功能的方法是使用列渲染器

$('#example').DataTable( {
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return "<a href='whatever/" + row[0]+"'>"+row[1]+"</a>";
                },
                "targets": 1
            },
            { "visible": false,  "targets": [ 0 ] }
        ]
    } );

$（'#示例'）。数据表（{
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
返回“”；
},
“目标”：1
},
{“可见”：false，“目标”：[0]}
]
} );

不确定这是否是您要找的

$("tbody > tr").click(function(){

 var bookId = $(this).children().first().text();
    var href = $(this).attr('data-href')+'/'+bookId;

    console.log(href);
    alert(href);
});

---

不确定这是否是您要找的

$("tbody > tr").click(function(){

 var bookId = $(this).children().first().text();
    var href = $(this).attr('data-href')+'/'+bookId;

    console.log(href);
    alert(href);
});

---

我通过以下代码找到了实现方法：

{"data": "title",
"render": function ( data, type, row, meta ) {
return "<a href='url?=" + runbookID + "'>" + data + '</a>';}
},

{“数据”：“标题”，
“呈现”：函数（数据、类型、行、元）{
返回“'；}
},

我通过以下代码找到了解决方法：

{"data": "title",
"render": function ( data, type, row, meta ) {
return "<a href='url?=" + runbookID + "'>" + data + '</a>';}
},

{“数据”：“标题”，
“呈现”：函数（数据、类型、行、元）{
返回“'；}
},

该ID将从json文件中的ID动态加载。有没有办法获得

？ID在第一列中是什么？我更新了我的代码，我现在无法检查它，但我想它对你有用。基本上，它应该寻找“第一个”同级（也就是第一个单元格）并从中获取文本，然后将其用作ID>您可能需要稍微修改它。这不起作用--这使得“标题”可以在列的顶部单击，但实际数据不是可点击的。我用一个指向JSFIDLE的链接更新了答案，显示了它是如何获取ID的。您应该能够使用它重定向到另一个页面，并使用从值连接的url。ID将从json文件中的ID动态加载。有没有办法获得

？ID在第一列中是什么？我更新了我的代码，我现在无法检查它，但我想它对你有用。基本上，它应该寻找“第一个”同级（也就是第一个单元格）并从中获取文本，然后将其用作ID>您可能需要稍微修改它。这不起作用--这使得“标题”可以在列的顶部单击，但实际数据不是可点击的。我用一个指向JSFIDLE的链接更新了答案，显示了它是如何获取ID的。您应该能够使用它重定向到另一个页面，并使用从该值连接的url。