Javascript 使用jQuery向DataTable中的TD添加工具提示

我有一个datatable，通过JavaScript为其绑定数据：

$("#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>

更新

---

附件：）

确定，因此您可以通过为列定义渲染函数来完成此操作，这样您就可以输出HTML进行显示，并返回原始数据进行排序/筛选。您需要将以下内容添加到DataTable options对象中：

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.
    }

columnDefs：[{
目标：2，
呈现：函数（数据、类型、完整、元）{
如果（类型==‘显示’）{
//返回带有标题和值的元素。此元素仅为显示而返回
返回“”+数据+“”；
}
//返回用于排序和筛选的原始数据
返回数据；
}
}],
drawCallback:函数（设置）{
//如果库无法自动拾取新元素，请在此连接工具提示。
//这将在draw事件完成后激发，以便DataTable位于DOM中
//所有的行。
}

---

在draw回调中，如果工具提示库不能自动拾取新的网格行，则可以连接工具提示库。

我使用了与公认答案不同的方法

我的DataTable初始化是在页面加载时发生的，然后我为它获取数据，然后循环并逐个添加行

您可以将表分配给变量，并且在添加行时，这些行也可以是变量。您可以像处理jQuery赋值一样影响它们

var dt = $('#isbnTable').DataTable();

Start looping through data {

    var newRow = dt.row.add([
            isbn.isbn,
            isbn.author,
            etc...
    });

    $(newRow).find('td').eq(0).addClass("isbn").attr("title", isbn.status);
    $(newRow).find('td').eq(1).addClass("author").attr("title", isbn.status);
}

---

.find（'td'）.eq（0）获取第一个td单元。增加该数字（或者如果希望全部循环），以影响所需的列。我使用row.add，以便将其分配给变量并更改类和属性。我还根据数据添加自定义类，例如，如果数字单元格超过某个阈值，则更改其颜色；如果行被锁定，则禁用输入

如果你能为我们提供一把可以使用的小提琴，那就容易多了。我已经添加了所需的小提琴