如何在jQuery數據表中單擊時在工具提示內顯示來自其中一列（非靜態內容）的數據？

Question

下面是我在我的網頁中使用的JavaScript。 我敢肯定有一種方法可以在使用下面的一些代碼時添加工具提示，我只是沒有想到它。 如果我可以獲取標題數據並將其放入下面我已經完成的搜索框中，那麼我應該能夠獲取表格單元格數據並將其放入工具提示中。問題是如何？

// DataTable 
var table = $('#example').DataTable(); 

//this just is code that adds search headers 
$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $(this).text(); 
     var data = 
     $(this).html('<input type="text" title = data style= "font-size:.6em" placeholder="Search ' + title + '" />'); 
    }); 






    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 

</script> 

Answer 1

您需要使用createdCell回調。這使您可以在顯示單元格之前操作單元格內容。在下面，我加入了title屬性，第4列（指數3）：

var table = $('#example').DataTable({ 
"columnDefs": [ { 
"targets": 3, 
"createdCell": function (td, cellData, rowData, row, col) { 
     $(td).attr('title',cellData); 
     } 
    }] 
}); 

這裏有一個工作示例：jsfiddle

這將標準title提示適用於這顯示在單元格徘徊。你可以用jquery-ui組件做更多的事情，你只需要在回調中綁定事件。