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参数中获得每一行的数据。