Datatables & JQuery——使每一行都可点击或链接

时间:2022-11-21 15:32:07

I need some help in understanding how to make each row "clickable" with Datatables...

我需要一些帮助来理解如何使每一行“可点击”的数据。

Server-side, I'm using Coldfusion to handle queries, etc. I display information about people in a Table rendered by Datatables.net.

服务器端,我使用Coldfusion来处理查询,等等。我在Datatables.net呈现的表中显示有关人员的信息。

The help pages say I ought to use a DOM / jQuery Event hander, like this:

帮助页面说我应该使用DOM / jQuery事件hander,如下所示:

    $(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' );
    } );
} );

So, this seems the route I want to take, but I'm not personally familiar enough with jQuery to facilitate what I want to do...

因此,这似乎是我想走的路,但我个人对jQuery还不够熟悉,无法帮助我实现我的目标……

Instead of an "Alert", what function, method, or process will allow me to send the data in my row to a new page?

与“Alert”相反,什么函数、方法或过程将允许我将行中的数据发送到新的页面?

In other words, how do I get the data inside of the selected row, and output it on a new page?

换句话说,如何在选定的行中获取数据,并将其输出到新的页面上?

To give you a practical example: 1) a service-desk technician clicks a row containing an employee, 2) info about the selected employee contained in the row, and is sent to a new page, like a form submit, or a URL variable... 3) options will exist to reset a password or unlock an account.

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

Your help is always appreciated, thank you in advance.

感谢您的帮助,提前谢谢。

2 个解决方案

#1


6  

Within that function you can call data() like so:

在该函数中,可以像这样调用data():

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

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

Here is the documentation: https://datatables.net/reference/api/row().data()

下面是文档:https://datatables.net/reference/api/row().data()

And for additional information, this SO answer here is a good read.

对于更多的信息,这里的答案很好。

#2


3  

You can use fnRowCallback event of datatable and bind click event to each row.

可以使用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;
           }
    });

You will get data of each row from aData parameter.

您将从aData参数中获得每一行的数据。

#1


6  

Within that function you can call data() like so:

在该函数中,可以像这样调用data():

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

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

Here is the documentation: https://datatables.net/reference/api/row().data()

下面是文档:https://datatables.net/reference/api/row().data()

And for additional information, this SO answer here is a good read.

对于更多的信息,这里的答案很好。

#2


3  

You can use fnRowCallback event of datatable and bind click event to each row.

可以使用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;
           }
    });

You will get data of each row from aData parameter.

您将从aData参数中获得每一行的数据。