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

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

4 个解决方案

#1

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发送行内容,则应将数组转换为对象,然后将其作为数据包含:

$('.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: _blank you 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>'
  }
},

#2

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

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

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.

这必须帮助你。

#3

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)上添加事件处理程序,并且必须在该事件处理程序中定义要处理的操作。

datatables

is a great source to have a look over and play around.

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

#4

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。

#1