Datatables：動的にロードされたすべてのセルにツールチップを追加します。

Question

datatablesをFixedColumnsで最初の4列に適用しています。列とすべてのセル値はjsonから動的に読み込まれ、いくつかの機能を適用したいと考えています：

1）列見出しのツールチップ。 data-html="true" data-toggle="tooltip" title= ...

2）3列のヘッダー：3つの値があります。可能であれば、3行のヘッダーが必要ですが、変更方法がわかりませんstr列の反復に変換します。

3）セルの値が長い場合は、セルの値を切り取ります。それはcutted.IはDataTableの初期化後、各セルを反復しているが、最初の行が持っていない場合、私はすべての値を表示する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列を有します。 私を助けることができますか？おかげ

はUPDATE 1： 3行ヘッダについての任意のアイデアを私は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

問題は、あなたがDataTablesとAjaxのtooltips.completeでコールバックを初期化しようとしているということです。あなたのsuccessメソッドのロジックがまだ完成しておらず、完全なコールバックにDatatableとツールチップを適用しようとしている可能性があります。 completeコールバック内のすべてのロジックを関数にラップし、その関数を$.each(tableData.columnsループの後に呼び出すことをお勧めします。