jQuery 如何使数据表行或单元格可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35547647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make datatable row or cell clickable?
提问by Plabon Dutta
I'm working on a history development of a particular user and I want it to be done with dataTables. However, I cannot find the way with which I can make my row or a particular cell clickable. I need to open separate links with the separate clicks for particular row. Any help would be appreciated. Thanks in advance !!!
我正在开发特定用户的历史记录，我希望它使用 dataTables 来完成。但是，我找不到可以使我的行或特定单元格可点击的方法。我需要使用特定行的单独点击打开单独的链接。任何帮助，将不胜感激。提前致谢 ！！！
Edited:: If I click on a row, I need all the data of the row, which is not a problem. I can do that. What I need to know is to make an $.ajax() request with that particular row data. I think this will do. However, it would be great to know how to open a link in a new tab on row click.
已编辑：：如果我点击一行，我需要该行的所有数据，这不是问题。我可以做到。我需要知道的是使用该特定行数据发出 $.ajax() 请求。我认为这会做。但是，知道如何在行单击时在新选项卡中打开链接会很棒。
$(document).ready(function() {
var dataSet = [
[]
];
$.ajax({
type: 'POST',
url: "webservices/view_patient_medical_history.php",
async: false,
//data: {'log_id': data},
success: function(response) {
dataSet = JSON.parse(response);
}
});
// var dataSet_arr = jQuery.makeArray(dataSet['responseText']);
$('#patient_medical_history').DataTable({
data: dataSet,
columns: [{
title: "Patient ID",
class: "center"
}, {
title: "Current Medications",
class: "center"
}, {
title: "Allergies",
class: "center"
}, {
title: "Diabetes",
class: "center"
}, {
title: "Asthma",
class: "center"
}, {
title: "Arthritis",
class: "center"
}, {
title: "High Blood Pressure",
class: "center"
}, {
title: "Kidney Problem",
class: "center"
}, {
title: "Liver Problem",
class: "center"
}, {
title: "Heart Problem",
class: "center"
}, {
title: "Other Problems",
class: "center"
}, {
title: "Present Problem",
class: "center"
}, {
title: "Last Updated",
class: "center"
}],
"scrollX": true,
//"paging": false,
"info": false,
//"lengthMenu": false,
dom: 'lBfrtip',
buttons: [
'copy', 'pdf', 'print'
]
/*"paging": false,
"info": false,
dom: 'Bfrtip',
buttons: [
'excel', 'pdf', 'print'
]*/
});
$('th').css("white-space", "nowrap");
});回答by davidkonrad
To activate click on cell you must use a delegated event handler - this will work on any dataTable :
要激活单击单元格，您必须使用委托的事件处理程序 - 这将适用于任何 dataTable ：
$('.dataTable').on('click', 'tbody td', function() {
//get textContent of the TD
console.log('TD cell textContent : ', this.textContent)
//get the value of the TD using the API
console.log('value by API : ', table.cell({ row: this.parentNode.rowIndex, column : this.cellIndex }).data());
})
Retrieving data of a clicked row can be done by
检索被点击行的数据可以通过
$('.dataTable').on('click', 'tbody tr', function() {
console.log('API row values : ', table.row(this).data());
})
If you want to send row content via AJAX you should transform the array to an object, and then include it as data:
如果您想通过 AJAX 发送行内容，您应该将数组转换为一个对象，然后将其包含为data：
$('.dataTable').on('click', 'tbody tr', function() {
var data = table.row(this).data().map(function(item, index) {
var r = {}; r['col'+index]=item; return r;
})
//now use AJAX with data, which is on the form [ { col1 : value, col2: value ..}]
$.ajax({
data: data,
url: url,
success: function(response) {
...
}
})
If you just want a plain link in a cell with target: _blankyou can use render:
如果你只想要一个单元格中的普通链接，target: _blank你可以使用render：
columns: [
{ title: "Patient ID", class: "center", render: function(data, type, full, meta) {
return '<a href="showdata/id?'+data+'" target=_blank>Show patient</a>'
}
},
回答by Rajshekar Reddy
First make sure you change the code of your dataTable initialization to save into a variable like this
首先确保您更改了 dataTable 初始化的代码以保存到这样的变量中
var oPatientMedicalHistory = $('#patient_medical_history').DataTable({
//your stuff
});
Then you can assign a click event to all the rows like this
然后你可以像这样为所有行分配一个点击事件
EDIT:As Pointed out by Gyrocode.com, we should use delegated event handler as the tr's are created dynamically as we page. So The code should look like.
编辑：正如 Gyrocode.com 所指出的，我们应该使用委托事件处理程序，因为 tr 是在我们页面时动态创建的。所以代码应该看起来像。
$('#patient_medical_history tbody').on('dblclick','tr', function() {
var currentRowData = oPatientMedicalHistory.row(this).data();
// alert(currentRowData[0]) // wil give you the value of this clicked row and first index (td)
//your stuff goes here
});
This must help you out.
这一定能帮到你。
回答by Ankit Tripathi
You need to add an eventhandler on click to cells(td) of your datatable and you have to define the action what you want to process in that eventhandler.
您需要在单击数据表的单元格（td）时添加一个事件处理程序，并且您必须定义要在该事件处理程序中处理的操作。
is a great source to have a look over and play around.
是一个很好的资源来看看和玩耍。
回答by danday74
We are using:
我们正在使用：
rowCallback: function (row: Node /*, data: any[] | Object, index: number */) {
// Intercept clicking of datatable links to avoid a full page refresh
$('a', row).click(function (e) {
e.preventDefault()
// const href = $(this).attr('href')
// parent.router.navigate([href])
})
// Navigate using anchor in cell to make entire cell clickable
$('td', row).click(function (/* e */) {
const anchor = $(this).find('a:first')[0]
if (anchor) {
const href = $(anchor).attr('href')
parent.router.navigate([href])
}
})
return row
}
Not sure this is the best approach but it does the job. May the Lord bless you :)
不确定这是最好的方法，但它可以完成工作。愿主祝福你:)
Apologies this is TypeScript but its dead simple to convert to JS.
抱歉，这是 TypeScript，但转换为 JS 非常简单。
回答by Carl Verret
on my side, using row: this.parentNode.rowIndexdidn't worked. I used this.parentNodeinstead and worked like a charm
在我这边，使用row: this.parentNode.rowIndex没有用。我this.parentNode改用并像魅力一样工作
