添加提示DataTable中對TD與jQuery

我有我綁定數據槽JavaScript中的數據表：添加提示DataTable中對TD與jQuery

$("#TableUsage").DataTable({ 
       data: infolist(), 
       ordering: true, 
       paginate: false, 
       "info": false, 
       columns: [ 
        { data: "Product", title: "Product" }, 
        { data: "Serial", title: "Serial" }, 
        { data: "App", title: "App" }, 
       ]});

的infolist看起來像：

infolist.push({Product: "01", Serial: "05", App: "M07", AppCol: "App info P01"}) 
infolist.push({Product: "02", Serial: "08", App: "M03", AppCol: "App info P02"}) 
infolist.push({Product: "03", Serial: "03", App: "M09", AppCol: "App info P03"})

通常，在HTML我只編寫：

<td data-bind="text: $data.App, attr: {title: $data.AppCol}">App</td>

和AppCol信息顯示在工具提示中，當在應用程序單元值上滾動時。

有沒有辦法添加工具提示，但使用Javascript代碼，因爲現在，在HTML中，表格看起來像這樣？

<table class="table" style="width: 100%;" id="TableUsage"></table>

UPDATE！

JSFiddle連接:)

來源

2016-11-21 Dana

如果您可以提供我們的工作小提琴，它會更容易幫助 –

我已經添加了請求的小提琴 – Dana

好了，所以你可以通過定義你的列渲染功能做到這一點，所以你可以輸出HTML用於顯示和排序/過濾返回的原始數據。您需要將以下添加到您的數據表選項對象：

columnDefs: [{ 
     targets: 2, 
     render: function(data, type, full, meta) { 
     if(type === 'display') { 
      // Return element with title and value. This is only returned for display 
      return '<div title="' + full.AppCol + '">' + data + '</div>'; 
     } 

     // Return raw data for sorting and filtering 
     return data; 
     } 
    }], 
    drawCallback: function(settings) { 
     //Wire up tool tip here if the library won't automatically pick up new elements. 
     // This fires after the draw event is completed so the DataTable is in the DOM 
     // With all of it's rows. 
    }

抽獎回調可以wireup您提示庫，如果它不會自動皮卡新的網格行。

來源

2016-11-21 17:54:25 Adrian

添加提示DataTable中對TD與jQuery

回答

相關問題