Bootstrap badge function error on the tooltip using escape symbol in the datatable js

Question

I use the following code

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);
    }
});

I use the EscapeFormat symbol or not use ,all got the same tooltip code break in <div><sapn class= >

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

How can I fix the error~Call someone help me!thanks~

davidkonrad · Accepted Answer · 2019-02-16 18:47:07Z

2

You need to be extra careful when you build "DOM strings" like this. To correct the error :

Remove quote redundancy ("" inside '' which contain more "")
Use " instead of \" where needed, i.e class="far fa-heart"
Close quote correctly after fa-thumbs-up
Quote title, i.e 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>';

You will also need a handler that triggers tooltip() when the table is redrawn:

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

Fixed version of the fiddle -> https://jsfiddle.net/kcy8dzjh/

edited Feb 16, 2019 at 18:47

answered Feb 16, 2019 at 18:31

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

robspin Over a year ago

Thank you for your great help! I try and work very well! Can I ask about the responsive function When the screen size changed and the responsive works, can the createdRow tooltip still work well? How to write the $('[data-toggle="tooltip"]').tooltip() again when the responsive happened?

davidkonrad Over a year ago

@robspin Thank you for accepting the answer. You could initialize tooltips on the responsive-display event as well. I guess that would work. If you want to work on the row node in the handler you can use row.nodes().to$() ...

Collectives™ on Stack Overflow

Bootstrap badge function error on the tooltip using escape symbol in the datatable js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related