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

Posted 2023-02-22

【中文标题】如何使数据表行或单元格可点击？

【英文标题】：How to make datatable row or cell clickable?

【发布时间】：2016-06-03 12:36:48

【问题描述】：

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

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

【问题讨论】：

`我需要为特定行打开单独的链接和单独的点击。`那么你使用什么值来打开不同的链接？你是从 thw 行本身获取的吗？

对不起，伙计。不必费心添加不必要的代码，因为几乎每个人都习惯了数据表的常见实现。对于这些基本功能，我想要的只是使行可点击。无论如何...这是我的演示 tanle 的代码。我想点击行。

我已经用表格基本结构的代码编辑了我的问题。现在，我需要那些可点击的行。

实际上...如果我可以使用特定的行或单元格数据向 php 发送 $_GET 或 $_POST 请求，那就足够了... Reddy

如果我想让特定列的每个单元格都可以点击怎么办？单击该单元格时，我想进行 ajax 调用。请提出一些让它工作的方法

【参考方案1】：

要激活单击单元格，您必须使用委托事件处理程序 - 这将适用于任何数据表：

$('.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>'
  
,

【讨论】：

我想你忘了提到如何设置变量table

您可以将其用于变量table：var table = $('.dataTable').DataTable();

这似乎对我不起作用。 “table.row ...”总是返回未定义。该表被识别，行也是如此（例如 table[0].rows）

一点额外的：对于单元格点击处理程序，this._DT_CellIndex 是一个具有行 ID 和列索引的对象。

单元格中的纯链接示例对我有用。谢谢。

【参考方案2】：

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

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

然后你可以像这样为所有行分配一个点击事件

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

这一定能帮到你。

【讨论】：

非常感谢，伙计。这肯定会帮助我继续进行下去。但是，我对数据表很陌生。你能告诉我 currentRowData[0] 是否给了我点击的行，那么 currentRowData[1] 会返回什么？如果我希望获取该行的特定单元格的值，该过程可能是什么？

currentRowData = 当前行的值数组 currentRowData[0] = 数组的第一个索引，这意味着该行的第一个 td 值，同样currentRowData[1] 会给你第二个 td 值

这仅适用于第一页上的行，因为 DataTables 会动态创建 tr 节点。您需要使用委托事件处理程序，例如$('#patient_medical_history tbody').on('dblclick', 'tr', function()

@Gyrocode.com 谢谢你提醒我这件事。我会更新我的答案。

【参考方案3】：

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

datatables

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

【参考方案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 非常简单。

【参考方案5】：

在我这边，使用 row: this.parentNode.rowIndex 没有用。我改用了this.parentNode 并且工作得像个魅力