データテーブルの行またはセルをクリック可能にするにはどうすればよいですか？

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

行の内容を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使用することができます。私は、特定のrow.`ための別のクリックで個別のリンクを開く必要がありますので、どのような値は、異なる開くために使用している

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のセル（TD）にクリックのイベントハンドラを追加する必要があり、あなたはそのイベントハンドラで処理するべきアクションを定義する必要があります。

datatables

以上の顔をしていると遊ぶのに最適なソースです。

Answer 3

まず、あなたはこの

EDITなどのすべての行にクリックイベントを割り当てることができますが、この

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

のような変数に保存するためにあなたのdataTable初期化のコードを変更してください： Gyrocode.comによって指摘されているように、私たちがページングするときにtrが動的に作成されるため、delegatedイベントハンドラを使用する必要があります。だから、コードはそのように見えるはずです。

$('#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 
}); 

これはあなたを助ける必要があります。あなたの場合はクリックされた行のデータを取得

$('.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()); 
}) 

して行うことができます。これは、すべてのデータテーブル上で動作します - あなたが委任されたイベントハンドラを使用する必要があり、セルをクリックしてアクティブにする