logo标签列表

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

jquerydatatabledatatables
32

我正在开发一个特定用户历史记录，并希望使用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");
});

1
我需要通过单独的点击打开不同的链接。那么你用什么值来打开不同的链接？你是从行本身获取吗？ - Rajshekar Reddy
抱歉，朋友。我没有添加不必要的代码，因为几乎每个人都习惯了数据表的常见实现方式。我只是希望基本功能中的行可以被点击。无论如何...这里是我的演示表格的代码。我希望行可以被点击。 - Plabon Dutta
我已经编辑了我的问题，并附上了表格基本结构的代码。现在，我需要使这些行可点击。 - Plabon Dutta
实际上……如果我能够发送一个$_GET或者$_POST请求到一个php页面，使用特定的行或单元格数据，那就足够了……Reddy - Plabon Dutta
如果我想让特定列的每个单元格都可点击。当单击该单元格时，我想发出一个ajax调用。请建议一些方法使其正常工作。 - Sourav Prem
5个回答
55

要激活单元格，您必须使用委托事件处理程序 - 这将适用于任何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>'
  }
},
10
我认为您忘记提到如何设置变量 table。 - Rajshekar Reddy
3
你可以使用以下代码来声明变量table：var table = $('.dataTable').DataTable(); - Neman
1
这对我似乎不起作用。"table.row..."始终返回未定义。表被识别，行也被识别（例如：table [0] .rows）。 - Keltanis
1
一个小提示：对于单元格点击处理程序，“this._DT_CellIndex”是一个包含行ID和列索引的对象。 - squaregoldfish
单元格中普通链接的示例对我很有用。谢谢。 - Mike Finch
6

首先确保将数据表初始化的代码更改为像这样保存在变量中：

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

这一定会对你有所帮助。

非常感谢，伙计。这肯定会帮助我继续下去。然而，我对datatables还很陌生。你能告诉我如果currentRowData [0] 给出了点击的行，那么currentRowData [1] 会返回什么？如果我想获取该行特定单元格的值，该怎么做呢？ - Plabon Dutta
1
currentRowData = 当前行的值数组 currentRowData[0] = 数组的第一个索引，即该行的第一个td值，同样地，currentRowData[1] 将给出第二个td值。 - Rajshekar Reddy
4
这个方法只对第一页的行有效，因为DataTables会动态创建tr节点。你需要使用委托事件处理程序，例如 $('#patient_medical_history tbody').on('dblclick', 'tr', function() {。 - Gyrocode.com
@Gyrocode.com 感谢您提醒我这件事。我会更新我的答案。 - Rajshekar Reddy
1
你需要在datatable的单元格(td)上添加一个点击事件处理程序，并定义你想要在该事件处理程序中处理的操作。 datatables 是一个很好的资源，可以浏览和尝试。
1
在我的情况下，使用 row: this.parentNode.rowIndex 无法正常工作。我改用 this.parentNode，就像魔法一样奏效了。
1
我们正在使用：
  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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接