如何使数据表行或单元格可单击？

我正在开发特定用户的历史开发，我希望用dataTables完成。 但是，我找不到可以使我的行或特定单元格可点击的方式。 我需要为特定行单独点击打开单独的链接。 任何帮助，将不胜感激。 提前致谢 ！！！

编辑::如果我点击一行，我需要该行的所有数据，这不是问题。 我能做到。 我需要知道的是使用该特定行数据生成$ .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"); }); 

Answer 1

要激活单击单元格，您必须使用委派的事件处理程序 – 这将适用于任何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()); }) 

检索单击行的数据可以通过执行

 $('.dataTable').on('click', 'tbody tr', function() { console.log('API row values : ', table.row(this).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) { ... } }) 

如果您只想在带有target: _blank的单元格中使用普通链接，则可以使用render ：

 columns: [ { title: "Patient ID", class: "center", render: function(data, type, full, meta) { return 'Show patient' } }, 

Answer 2

首先确保更改dataTable初始化的代码以保存到这样的变量中

 var oPatientMedicalHistory = $('#patient_medical_history').DataTable({ //your stuff }); 

然后，您可以将click事件分配给所有这样的行

编辑：正如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 }); 

这必须帮助你。

Answer 3

您需要在单击数据表的单元格（td）上添加事件处理程序，并且必须在该事件处理程序中定义要处理的操作。

数据表

是一个很好的资源来看看和玩。

Answer 4

我们正在使用：

  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 } 

不确定这是最好的方法，但它确实起作用。 愿主保佑你:)

道歉这是TypeScript，但它很容易转换为JS。