2016-11-21 3 views
0

У меня есть DataTable, для которых я связать корыто данных JavaScript:Добавить подсказку для TD в DataTable с 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 отображается в виде всплывающей подсказки при пылесосить над значением App клеток.

Есть ли способ добавить всплывающую подсказку, но с использованием кода Javascript, потому что прямо сейчас, в HTML, таблица выглядит так?

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

ОБНОВЛЕНИЕ!

JSFiddle прилагается :)

+0

было бы намного проще помочь, если вы можете предоставить нам рабочую скрипку –

+0

Я добавил запрошенную скрипку – Dana

ответ

1

Ok, так что вы можете сделать это путем определения функции визуализации для столбца, так что вы можете вывод HTML для отображения и вернуть исходные данные для сортировки/фильтрации. Вам нужно будет добавить следующее к объекту DataTable вашим вариантов:

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 вашей подсказки библиотеки, если он не будет автоматически пикапы новых строк сетки.

Смежные вопросы