Ошибка функции значка начальной загрузки на всплывающей подсказке с использованием escape-символа в datatable js

Question

Я использую следующий код

var table = $('#example').DataTable({
    responsive: true,
    "createdRow": function( row, data, dataIndex ) {
        var te='something';    
    var heart='"<div><span class=\"badge badge-pill badge-success\"><i class=\"far fa-heart\"></i></span></div>"';
    var td1='<button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="top" data-html="true"  title='+heart+'><div class="far fa-thumbs-up>'+te+'</div></button>';
    $('td:eq(1)',row).html(td1);


    var td2='<button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="top" data-html="true"  title="12345"><div class="far fa-thumbs-up">'+te+'</div></button>';
    $('td:eq(2)',row).html(td2);
    }
});

Я использую символ EscapeFormat или не использую, все получили одинаковый код всплывающей подсказки в <div><sapn class= >

https://jsfiddle.net/housekeepings/v8x9wn03/26/

Как я могу исправить ошибку ~ Позвоните кому-нибудь, помогите мне! Спасибо ~

Answer 1

Вы должны быть очень осторожны, когда создаете «строки DOM», как это.Чтобы исправить ошибку:

• Удалить избыточность кавычек ("" внутри '', которые содержат больше "")
• Используйте " вместо \" там, где это необходимо,т.е. class="far fa-heart"
• Закрыть цитату правильно после fa-thumbs-up
• Название цитаты, т.е. title="'+heart+'"

→

var heart='<div><span class=&quot;badge badge-pill badge-success&quot;><i class=&quot;far fa-heart&quot;></i></span></div>';
var td1='<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-html="true" title="'+heart+'"><div class="far fa-thumbs-up">'+te+'</div></button>';

Вытакже потребуется обработчик, который запускает tooltip() при перерисовке таблицы:

$('#example').on('init.dt draw', function() {
  $('[data-toggle="tooltip"]').tooltip()
})  

Исправлена ​​версия скрипки -> https://jsfiddle.net/kcy8dzjh/