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

Question

我正在开发特定用户的历史开发,我希望用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 '<a href="showdata/id?'+data+'" target=_blank>Show patient</a>'
  }
},

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
});

这必须帮助您。