javascript - 使用 jQuery 将工具提示添加到 DataTable 中的 TD

Question

我有一个数据表，我通过 JavaScript 为其绑定(bind)数据:

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

信息列表看起来像:

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>

当鼠标悬停在“App”单元格值上时，AppCol 信息会显示在工具提示内。

有没有办法添加工具提示，但使用 Javascript 代码，因为现在 HTML 中的表格看起来像这样？

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

更新!

JSFiddle附:)

Answer 1

好的，您可以通过为列定义渲染函数来实现，这样您就可以输出 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.
    }

在绘制回调中，如果工具提示库不会自动拾取新的网格行，您可以连接它。