Подсказка не работает с данными datatable

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 таблицы (с одной 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 пришел из Аякса DataTable (который перезарядить HTML, и сделать его свободно каждая соответствующая функция объявлена, входящих в подсказке один.

Мое окончательное решение, чтобы добавить . всплывающая подсказка в параметре 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 к конкретной ячейке, можно использовать функции render в columns определения:

"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"}], 

В этом примере данные, соответствующие «имя» будет курсивом. Если вы хотите иметь всплывающую подсказку, просто замените тег <i>, например, тегом <span title='tooltip'>. Обязательно проверьте документы render для получения дополнительной информации!

Если то, что вы хотите, это подсказка в каждая ячейка заменить drawCallback с [rowCallback] [2]. drawCallback вызывается каждый раз, когда таблица (re) рисуется (при фильтрации, упорядочивании, при инициализации и т. Д.). RowCallback вызывается, когда datatables генерирует строку.