ツールチップがデータテーブルで機能していない

Question

問題を調査してくれてありがとう。

私はこのテーマに関する多くの関連トピックを見てきましたが、多くの解決策を試しましたが、それでも問題は解決しませんでした。

私は生成されたDataTableを持っていて、カスタマイズツールチップをセルに表示したい。簡潔にするために、<i>italics</i>がtrマークアップに表示されるようにしたいとします。

これは私が実際に多くの変更後に持っているものです。

<!-- REQUIRED JS SCRIPTS --> 

<!-- jQuery 2.2.3 --> 
<script src="/miscellaneous/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script> 
<!-- Bootstrap 3.3.6 --> 
<script src="/miscellaneous/adminLTE/bootstrap/js/bootstrap.min.js"></script> 
<!-- AdminLTE App --> 
<script src="/miscellaneous/adminLTE/dist/js/app.min.js"></script>  
<!-- Data Tables --> 
<script src="/miscellaneous/bov2/js/jquery.dataTables.min.js"></script> 
<script src="/miscellaneous/bov2/js/dataTables.bootstrap.min.js"></script> 
<!-- SlimScroll --> 
<script src="/miscellaneous/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script> 
<!-- FastClick --> 
<script src="/miscellaneous/adminLTE/plugins/fastclick/fastclick.js"></script> 
<!-- AdminLTE for demo purposes --> 
<script src="/miscellaneous/adminLTE/dist/js/demo.js"></script> 
<!-- page script --> 
<script> 
    $(document).ready(function() { 

     /* Init DataTables */ 
     $('#example').DataTable({ 
      "paging": true, 
      "lengthChange": true, 
      "searching": true, 
      "ordering": true, 
      "info": true, 
      "autoWidth": true, 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       "url": "{{ path('tableUserAjax') }}", 
       "type": "POST", 
       "dataType": "json", 
      }, 
      "columns": [ 
       {"data": "login"}, 
       {"data": "name"}, 
       {"data": "date"}, 
       {"data": "language"}, 
       {"data": "group"}, 
       {"data": "role"}, 
       {"data": "valid"}], 
      "fnDrawCallback": function (oSettings) { 
       $('#example tbody tr').each(function() { 
        var sTitle; 
        var nTds = $('td', this); 
        var s0 = $(nTds[0]).text(); 
         sTitle = "<h1>" + s0 + "</h1>"; 
         this.setAttribute('rel', 'tooltip'); 
        this.setAttribute('title', sTitle); 
       }); 
      } 
     }); 
     /* Apply the tooltips */ 
     $('#example').tooltip({ 
      html : true, 
      /* i tried this : content: "<b>Bold</b>, <i>Italic</i>",*/ 
     }); 
    }); 
</script> 

そして、ここでは私のHTMLのテーブルには、（1 LIGNEでそれをシンプルに保つために）です：

<table class="table table-bordered table-hover dataTable no-footer" id="example" role="grid" style="width: 1163px;" data-original-title="" title=""> 
    <thead> 
     <tr role="row"> 
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 96.2px;" 
      aria-sort="ascending" aria-label="Login: activate to sort column descending">Login 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 176.2px;" 
      aria-label="Name: activate to sort column ascending">Name 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 201.2px;" 
      aria-label="Date: activate to sort column ascending">Date 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 145.2px;" 
      aria-label="Language: activate to sort column ascending">Language 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 102.2px;" 
      aria-label="Group: activate to sort column ascending">Group 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 83.2px;" 
      aria-label="Role: activate to sort column ascending">Role 
      </th> 
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;" 
       aria-label="Valid: activate to sort column ascending">Valid 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr role="row" class="odd" rel="tooltip" title="&lt;h1&gt;Aaron&lt;/h1&gt;"> 
      <td class="sorting_1">Aaron</td> 
      <td>Aaron MARTIN</td> 
      <td>30 mars 2016</td> 
      <td>English</td> 
      <td>Marketing</td> 
      <td></td> 
      <td>0</td> 
     </tr> 
    </tbody> 
</table> 

はこの作品べきではないのですか？

Answer 1

SO、命題に基づいて、私はproblemeがHTMLをリロードすると、すべての関連する機能は、宣言したツールチップ1を含め、それが緩んで作るAJAXのDataTable（から来たことが分かった。

私の最終的な解決策は、追加することですfnDrawCallbackパラメータのツールチップは、以下を参照してください：。

<script> 

    $(document).ready(function() { 

     /* Init DataTables */ 
     $('#example').DataTable({ 
      "paging": true, 
      "lengthChange": true, 
      "searching": true, 
      "ordering": true, 
      "info": true, 
      "autoWidth": true, 
      "processing": true, 
      "serverSide": true, 
      "ajax": { 
       "url": "{{ path('tableUserAjax') }}", 
       "type": "POST", 
       "dataType": "json", 
      }, 
      "columns": [ 
       {"data": "login"}, 
       {"data": "name"}, 
       {"data": "date"}, 
       {"data": "language"}, 
       {"data": "group"}, 
       {"data": "role"}, 
       {"data": "valid"}], 
      "fnDrawCallback": function (oSettings) { 
       $('#example tbody tr').each(function() { 
        var sTitle; 
        var nTds = $('td', this); 
        var s0 = $(nTds[0]).text(); 
        var s1 = $(nTds[1]).text(); 
        var s2 = $(nTds[2]).text(); 
        var s3 = $(nTds[3]).text(); 
        var s4 = $(nTds[4]).text(); 
        var s5 = $(nTds[5]).text(); 

        sTitle = "<h1>"+s0+"</h1>"; 

        this.setAttribute('rel', 'tooltip'); 
        this.setAttribute('title', sTitle); 
        console.log(this); 
        console.log($(this)); 
        $(this).tooltip({ 
         html: true 
        }); 
       }); 
      } 
     }); 

    }); 

</script> 

Answer 2

あなたは、この使用することができます。

table.cells().every(function() { 

     $(this.node()).tooltip({ 
       html : true, 
       content: "<b>Bold</b>, <i>Italic</i>", 
      }); 
}); 

テーブル= $（ '＃例'）のDataTable（....）を、

Answer 3

特定のセルにHTMLを追加することで何をしたい、あなたはcolumns定義でrender機能を利用することができた場合：この例では

"columns": [ 
      {"data": "login"}, 
      {"data": "name", 
       "render": function(data,type,full){ 
         if(type==='display'){ 
          return '<i>'+data+'</i>' 
         } 
         return data; 
       } 
      }, 
      {"data": "date"}, 
      {"data": "language"}, 
      {"data": "group"}, 
      {"data": "role"}, 
      {"data": "valid"}], 

、「名前」になるに対応するデータイタリック体で。ツールチップを表示したい場合は、タグをたとえば<span title='tooltip'>タグに置き換えてください。 詳細については、renderのドキュメントを必ず確認してください。

各セルのツールチップがの場合、drawCallbackを[rowCallback] [2]に置き換えてください。 drawCallbackは、テーブルが（再）描画されるたびに呼び出されます（フィルタリング、順序付け、初期化時など）。 RowCallbackは、datatablesが行を生成するときに呼び出されます。