Datatables和JQuery - 如何使每一行可点击或链接

Question

我需要帮助理解如何使用Datatables使每一行都可点击...

在服务器端，我使用Coldfusion处理查询等操作。我使用Datatables.net渲染表格来展示关于人员的信息。

帮助页面上说我应该使用DOM / jQuery事件处理程序，像这样:

    $(document).ready(function() {
    $('#example').dataTable();

    $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You clicked on '+name+'\'s row' );
    } );
} );

所以，这似乎是我想要采取的路线，但我个人对jQuery不够熟悉，无法实现我想要做的事情...

与其使用"Alert"，有什么函数、方法或过程可以让我将行中的数据发送到一个新页面?

换句话说，我如何获取所选行内的数据，并在新页面上输出它?

为了给您提供一个实际的例子：1)服务台技术人员单击包含员工的行，2)所选员工的信息包含在行中，并发送到一个新页面，例如表单提交或URL变量... 3)将存在重置密码或解锁帐户的选项。

非常感谢您的帮助，提前致谢。

- NamedArray

Answer 1

在那个函数内，你可以这样调用 data()：

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row(this).data();
        console.log(data);
    });
});

这是文档：https://datatables.net/reference/api/row().data()。

此外，这个SO答案在这里提供了更多信息。

- jwatts1980

---

这是一个很好的答案。谢谢！ - Merlevede

Answer 2

您可以使用Datatable的fnRowCallback事件，并将单击事件绑定到每一行。

    var oTable = $('#data').dataTable({
          "fnRowCallback": function (nRow, aData, iDisplayIndex) {

                // Bind click event
                $(nRow).click(function() {

                      alert( 'You clicked on '+aData.name+'\'s row' );

                });

                return nRow;
           }
    });

您将从aData参数中获取每行数据。

- Manu Benjamin