Làm cách nào để hiển thị hàng hoặc ô có thể định cấu hình?

Question

Tôi đang nghiên cứu phát triển lịch sử của một người dùng cụ thể và tôi muốn nó được thực hiện với dataTables. Tuy nhiên, tôi không thể tìm thấy cách mà tôi có thể làm cho hàng của tôi hoặc một ô cụ thể có thể nhấp. Tôi cần mở các liên kết riêng biệt với các nhấp chuột riêng biệt cho hàng cụ thể. Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn trước !!!

Đã chỉnh sửa :: Nếu tôi nhấp vào một hàng, tôi cần tất cả dữ liệu của hàng, đó không phải là vấn đề. Tôi có thể làm điều đó. Điều tôi cần biết là thực hiện yêu cầu $ .ajax() với dữ liệu hàng cụ thể đó. Tôi nghĩ rằng điều này sẽ làm. Tuy nhiên, thật tuyệt khi biết cách mở một liên kết trong một tab mới khi nhấp chuột vào hàng.

$(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

Để kích hoạt nhấp chuột vào ô bạn phải sử dụng một trình xử lý sự kiện giao - điều này sẽ làm việc trên bất kỳ 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()); 
}) 

Lấy dữ liệu của một hàng nhấp có thể được thực hiện bằng cách

$('.dataTable').on('click', 'tbody tr', function() { 
    console.log('API row values : ', table.row(this).data()); 
}) 

Nếu bạn muốn gửi nội dung hàng qua AJAX, bạn nên chuyển đổi mảng thành đối tượng và sau đó bao gồm mảng đó thành 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) { 
     ... 
    } 
}) 

Nếu bạn chỉ muốn một liên kết đơn giản trong một tế bào với target: _blank bạn có thể sử dụng render:

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

Bạn cần phải thêm một eventhandler trên nhấp chuột để tế bào (td) của DataTable của bạn và bạn phải xác định các hành động những gì bạn muốn xử lý trong eventhandler đó.

datatables

là một nguồn tuyệt vời để xem qua và phát xung quanh.

Answer 3

Trước tiên hãy chắc chắn rằng bạn thay đổi mã khởi tạo DataTable của bạn để lưu vào một biến như thế này

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

Sau đó, bạn có thể gán một sự kiện click vào tất cả các hàng như

EDIT này: Như được chỉ ra bởi Gyrocode.com, chúng ta nên sử dụng trình xử lý sự kiện được ủy quyền khi trình xử lý sự kiện được tạo tự động như chúng ta trang. Vì vậy, mã nên giống như thế.

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

Điều này phải giúp bạn.