web-dev-qa-db-ja.com

データテーブルの行またはセルをクリック可能にする方法は？

私は特定のユーザーの履歴の開発に取り組んでおり、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");
});
jquerydatatabledatatables
21
Plabon Dutta

セルのクリックをアクティブにするには、委任されたイベントハンドラーを使用する必要があります。これは、すべての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>'
  }
},
36
davidkonrad

まず、dataTable初期化のコードを変更して、このような変数に保存するようにしてください

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

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

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

これはあなたを助けなければなりません。

4
Rajshekar Reddy

私の側では、row: this.parentNode.rowIndexを使用してもうまくいきませんでした。代わりにthis.parentNodeを使用し、チャームのように働きました

0
Carl Verret

私たちは使用しています：

  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に変換するのは非常に簡単です。

0
danday74

データテーブルのセル（td）にクリック時にイベントハンドラーを追加する必要があり、そのイベントハンドラーで処理するアクションを定義する必要があります。

データテーブル

見て回って遊ぶのに最適なソースです。

0
Ankit Tripathi