Question

我有一个数据表，我通过JavaScript绑定数据：

const createMatrix = (x, y) => Array.from({ length: x }, () =>
  Array.from({ length: y }, () => 0)
);

const result = createMatrix(9, 5);

console.log(result);

infolist看起来像：

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

通常，在HTML中我只写：

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"})

当苹果移动到App单元格值时，AppCol信息显示在工具提示内。

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

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

更新<！/强>

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

在绘图回调中，如果工具提示库不会自动拾取新的网格行，则可以对其进行连接。

Answer 2

我的做法与接受的答案不同。

我的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（＆＃39; td＆＃39;）。eq（0）为您提供第一个td单元格。增加该数字（或者如果您想要全部循环）可以影响您想要的任何列。我使用row.add，所以我可以将它分配给一个变量并更改类和属性。我还根据数据添加自定义类，例如，如果超过某个阈值，则更改数字单元格的颜色;如果行被锁定，则禁用输入。

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

2 个答案: