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

我正在开发特定用户的历史开发,我希望用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",{
            title: "Allergies",{
            title: "Diabetes",{
            title: "Asthma",{
            title: "Arthritis",{
            title: "High Blood Pressure",{
            title: "Kidney Problem",{
            title: "Liver Problem",{
            title: "Heart Problem",{
            title: "Other Problems",{
            title: "Present Problem",{
            title: "Last Updated",class: "center"
        }],"scrollX": true,//"paging": false,"info": false,//"lengthMenu": false,dom: 'lBfrtip',buttons: [
            'copy','pdf','print'
        ]


        /*"paging": false,dom: 'Bfrtip',buttons: [
            'excel','print'
        ]*/
    });

    $('th').css("white-space","nowrap");
});

解决方法

要激活单击单元格,您必须使用委派的事件处理程序 – 这将适用于任何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发送行内容,则应将数组转换为对象,然后将其作为数据包含：

$('.dataTable').on('click',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>'
  }
},

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

解决方法

猜你在找的jQuery相关文章