数据表：将工具提示添加到动态加载的所有单元格

Question

我在前四列使用datatables 和FixedColumns。列和所有单元格值都是从 json 动态加载的，我想应用一些功能：

1) 列标题上的工具提示。我通过添加data-html="true" data-toggle="tooltip" title= ...获得它

2）三列标题：现在在我的列标题中，我有三个值，如果可能的话，我希望标题有三行，但我不知道如何将 str 更改为列迭代。

3）如果单元格值很长，则剪切它。我已将此代码添加到 HTML 页面

<style>
#slTable td {
   white-space: nowrap; 
   text-overflow:ellipsis; 
   overflow: hidden; 
   max-width:1px;
}
</style>

4）向每个单元格值添加工具提示以显示所有值（如果它被剪切）。我在数据表初始化后迭代了每个单元格，但第一行没有工具提示，页面很慢，当我使用鼠标时在一个值上，所有单元格都修改自己的大小，移动所有表格。

这是实际的 javascript 代码：

var tableData;
var tableName='#slTable';

$(document).ready(function (){

    jQuery.ajax({
        type : "GET",
        url : "table/"+document.getElementById("hiddenIdCar").value,
        headers: {'Content-Type': 'application/json'},  
        beforeSend: function() {
            waitingModal.showPleaseWait();
        },
        success: function(data,status,xhr){
            //No exception occurred
            if(data.success){
                tableData = data.result;
                $.each(tableData.columns, function (k, colObj) {
                    //check if parnName is not empty
                    if (colObj.parName)
                        var str = '<th data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName+'<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
                    else
                        var str = '<th data-html="true" data-toggle="tooltip" title="<b>DESCRIPTION</b>:'+colObj.description+'<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.description + '</th>';
                    $(str).appendTo(tableName+'>thead>tr');
                });
            } else {
                waitingModal.hidePleaseWait();
                notifyMessage(data.result, 'error');
            }
        },
        error: function(xhr,status,e){
            window.location.href = "/500";
        }
    }).complete(function() {
        //initialize datatable
        if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
            var slTable = $(tableName).DataTable({
                scrollCollapse: true,
                scrollX:        true,
                scrollY:        '60vh',
                paging:         false,
                "data": tableData.data,
                "columns": tableData.columns,
                fixedColumns:   {
                    leftColumns: 4
                },
                "initComplete": function(settings){
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    }); 
                    //add timeout because otherwise user could see a too fast waiting modal
                    setTimeout(function(){
                        waitingModal.hidePleaseWait();
                    }, 1000);       
                } 
            });
        }
        else {
            slTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
        }

        //TOOLTIP test cell
        $(tableName+ ' tbody td').each( function (k, cellObj){
            this.setAttribute( 'title', cellObj.innerText );
            this.setAttribute( 'data-toggle', "tooltip" );
        });
        /* Apply the tooltips */
        slTable.$('td').tooltip( {
//          "delay": 0,
//          "track": true,
//          "fade": 250
        } );
    });     
});

该表有 300 行和 200 列（也许我必须切换到服务器端处理）。 你能帮助我吗？谢谢

更新 1： 我已将所有工具提示代码移到 initComplete 中，并且可以正常工作

"initComplete": function(settings){
                //TOOLTIP test cell
                $(tableName+ ' tbody td').each( function (k, cellObj){
                    this.setAttribute( 'title', cellObj.innerText );
                    this.setAttribute( 'data-toggle', "tooltip" );
                });
                $('[data-toggle="tooltip"]').tooltip({
                    container: 'body'
                }); 
                //add timeout because otherwise user could see a too fast waiting modal
                setTimeout(function(){
                    waitingModal.hidePleaseWait();
                }, 1000);       
            } 

关于三行标题的任何想法？

Answer 1

如果您运行此代码，它将自动激活所有工具提示。您不必担心引用特定的。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Answer 2

问题是您正在尝试在 ajax 的 .complete 回调中初始化 DataTables 和 tooltips。您的 success 方法中的逻辑可能尚未完成，您正尝试在您的完整回调中应用 Datatable 和工具提示。我建议您将 complete 回调中的所有逻辑包装到一个函数中，并在 $.each(tableData.columns 循环之后调用该函数。