如何通過單擊DataTable中的每個列按鈕來獲取列值？

我想爲Datatables可擴展行框架上的每一列設置編輯按鈕。如何通過單擊DataTable中的每個列按鈕來獲取列值？

如何通過點擊DataTable中的每個列按鈕來獲取列值？當我點擊一個按鈕，我得到的數據1和數據[2]值未定義。任何人都可以告訴我我做錯了嗎？請參閱包含的圖片和摘錄。

<script> 
    $(document).ready(function() { 

      var table = $('#example').DataTable({ 
       "ajax": "user.json", 

       "columns": [ 
        { 
         "className": 'details-control', 
         "orderable": false, 
         "data": null, 
         "defaultContent": '' 
        }, 
        {"data": "Name"}, 
        {"data": "Phone"}, 
        {"data": "Role"}, 
        { 
         "targets": -1, 
         "data": null, 
         "defaultContent": "<button>Edit</button>" 
        } 
       ], 
       "order": [[1, 'asc']] 
      }); 
      $('#example tbody').on('click', 'button', function() { 
       var data = table.row($(this).parents('tr')).data(); 
       alert(data[1] + "'s Phone is: " + data[2]); 
      }); 

      // Add event listener for opening and closing details 
      $('#example tbody').on('click', 'td.details-control', function() { 
       var tr = $(this).closest('tr'); 
       var row = table.row(tr); 

       if (row.child.isShown()) { 
        // This row is already open - close it 
        row.child.hide(); 
        tr.removeClass('shown'); 
       } 
       else { 
        // Open this row 
        row.child(format(row.data())).show(); 
        tr.addClass('shown'); 
       } 
      }); 
     }); 

    </script> 

    <html> 
    <table id="example" class="display" cellspacing="0" width="100%"> 
         <thead> 
         <tr> 
          <th></th> 
          <th>Name</th> 
          <th>Phone</th> 
          <th>Role</th> 
          <th></th> 
         </tr> 
         </thead> 
         <tfoot> 
         <tr> 
          <th></th> 
          <th>Name</th> 
          <th>Phone</th> 
          <th>Role</th> 
          <th></th> 
         </tr> 
         </tfoot> 
        </table> 
    </html>

來源

2016-11-30 Sadequer Rahman

你能爲我們提供你的html嗎？或更好，但小提琴？ –

@Hoang感謝您的意見。在

相關問題