dataTable row into hyperlink error

Question

我是新來處理dataTable的。我試圖將行轉換成href使用下面的代碼：

"fnRowCallback": function(row, data) { 
    $('tr', row).html('<a href="userDet/' + data[3] + '"><td>' +data[0]+ '</td><td>' +data[1]+ '</td><td>' +data[2]+ '</td></a>'); 
    return row; 
}, 

這是不工作，但在轉換href到單個列。它工作正常。

"fnRowCallback": function(row, data) { 
    $('td:eq(1)', row).html('<a href="userDet/' + data[3] + '"><td>' +data[0]+ '</td></a>'); 
    return row; 
}, 

我做錯了什麼？

編輯

我html是：

  <table id="myTable" class="table table-hover"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Door No</th> 
         <th>Address</th> 
         <th style="display: none;">Account ID</th> 
        </tr> 
       </thead> 
       <tbody> 

       </tbody> 
      </table> 

我Jquery是：

var oTable = jQuery('#myTable').dataTable({ 
    processing: true, 
    serverSide: true, 
    "bDestroy": true, 
    "pageLength": 6, 
    "ajax": '/userDetails?query='+query+'', 
    "type":'get', 
    "fnRowCallback": function(row, data) { 
       $('td:eq(1)', row).on('click',function(){ 
        window.location = 'userDet/' + data[3] ; 
       }); 
      }, 

    "columnDefs": [ 
     { 
      "targets": [ 3 ], 
      "visible": false, 
      "searchable": true 
     } 
    ]   

    }); 

Answer 1

您需要按照表HTML結構.. 表，TBODY，TR， td ....如果此結構中斷，那麼您的CSS將會中斷並且DataTables壯舉你可能會打破..

當你試圖把a標記直接放在tr下，你的方法會打破錶結構。 tr應該始終爲td，因爲它是孩子。

解決方案：使用data-*屬性來存儲導航網址在tr標籤，並在此tr負載你想就像一個錨標記點擊的頁面的點擊..

下面是示例：

"fnRowCallback": function(row, data) { 
    $('tr', row).attr('data-navigate-url','userDet/' + data[3]); 
    return row; 
}, 

這將設置你的TR標籤的屬性..

添加單擊事件處理程序，這些tr標籤

$("#yourTable").on('click','tr',function(){ 
    window.location = $(this).data('navigate-url'); 
});