Datatables not compatible with bootstrap tooltip ?

markindel

Hi i have a problem with using datatables with bootstrap, ia have an error like this on console "$(...).find(...).tooltip is not a function"

this is my code

<script src="<?=base_url()?>assets/js/jquery-1.12.3.min.js"></script>
<script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>assets/js/popup.min.js"></script>
<script src="<?=base_url()?>assets/js/sweet-alert.min.js"></script>
<script src="<?=base_url()?>assets/js/jquery.validate.min.js"></script>
<script src="<?=base_url()?>assets/js/script.js"></script>
<script src="<?=base_url()?>assets/plugins/DataTables/datatables.min.js"></script>
<script src="<?=base_url()?>assets/js/chosen.jquery.min.js"></script>
<script>

$(document).ready(function(){

    var oTable = $('#oTable').DataTable({
        "autoWidth":true,
                "pagingType":"full_numbers",
                "processing": false,
                "responsive":true,
                "serverSide": true,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Semua"]],
                "ajax": {
                    "url": base_url + 'ekp2/read',
                    "type": "POST",
                    "data": function(d) {
                        d.instansi = $('#instansi').val();
                        d.periodeBulan = $('#periodeBulan').val();
                        d.periodeTahun = $('#periodeTahun').val();
                    }
                },
                "aoColumns": [ 
                    {"visible":false},
                    {orderable:false},
                    {"sClass": "text-center"},
                      {"visible":false},
                      {"sClass": "text-justify"},
                     {"visible":false},
                     {"sClass": "text-center"},
                     {"sClass": "text-center"},
                        {"visible":false},
                         {"sClass": "text-center"},
                         {"visible":false},
                     {"sClass": ""}
                ],
                "fnRowCallback": function(nRow, aData, iDisplayIndex) {
                    $(nRow).attr("id", aData[0]);
                    return nRow;
                }
            });


            //button tools
            new $.fn.dataTable.Buttons( oTable, {
                buttons: 
                    [{
                        text: '<i class="fa fa-table"></i> Details',
                        className:'purple',
                        action: function ( e, dt, node, config ) {
                           popup.open({
                                items: {
                                    src: base_url + 'instansi/details'
                                },
                                type: 'ajax',
                                ajax: {
                                    settings: {
                                        data: {
                                            'id': function() {
                                                //return toggle()
                                            }
                                        },
                                        type: 'POST'
                                    }
                                },
                                closeOnContentClick: false,
                                closeOnBgClick: false,
                                enableEscapeKey: true
                            });
                        },
                        init:function(dt, node, config){
                            node.attr('id','details');
                        }
                    },
                    {

                        extend:    'copyHtml5',
                        text:      '<i class="fa fa-files-o"></i> Copy',
                        titleAttr: 'Copy',
                        className:'pink'
                        
                    },
                    {
                        exportOptions: {
                            columns: ':visible'
                        },
                        extend:    'excelHtml5',
                        text:      '<i class="fa fa-file-excel-o"></i> Excel',
                        titleAttr: 'Excel',
                        title : 'export',//filename
                        className:'cyan'
                    },
                    {
                        exportOptions: {
                            columns: ':visible'
                        },
                        extend:    'csvHtml5',
                        text:      '<i class="fa fa-file-text-o"></i> CSV',
                        titleAttr: 'Excel',
                        title : 'export',//filename
                        className:'orange'
                    },
                    {
                        extend:    'pdfHtml5',
                        text:      '<i class="fa fa-file-pdf-o"></i> PDF',
                        titleAttr: 'Pdf',
                        title : 'export',//filename
                        className:'plum'
                    },
                    {
                        text: '<i class="fa fa-file-code-o"></i> JSON',
                        className:'red',
                         titleAttr: 'JSON',
                        action: function ( e, dt, button, config ) {
                            var data = dt.buttons.exportData();
         
                            $.fn.dataTable.fileSave(
                                new Blob( [ JSON.stringify( data ) ] ),
                                'Export.json'
                            );
                        }
                    },
                    {
                        text: '<i class="fa fa-print"></i> Print',
                        className:'aqua',
                        extend: 'print',
                        key: {
                            key: 'p',
                            altKey: true
                        },
                        exportOptions: {
                            columns: ':visible'
                        }
                    }
                ]
            } );
         
            oTable.buttons( 0, null ).container().prependTo('#table-tools');


         //   $('#oTable').wrap('<div class="table-responsive"></div>');


    
       
      //search
      $('.dataTables_filter').addClass('right-to-center').empty().append('<form id="searchtable"><div class="input-group input-group-sm "><input type="text" class="form-control" placeholder="Pencarian..."><span class="input-group-btn"><button class="btn btn-primary btn-search" type="submit"><i class="fa fa-search"></i></button></span></div></form>');

      $(document).on('submit', "#searchtable", function(e){
        e.preventDefault();
           oTable.search($(this).find('input').val()).draw();
      });

      //panel button
      $('button.panel-refresh').click(function(){
         oTable.ajax.reload();
      });


    //choosen
    $('#instansi,#periodeBulan,#periodeTahun').chosen({
        allow_single_deselect: true,
        width:"100%",
        no_results_text:'Pencarian tidak ditemukan!'
    }).change(function(){
            oTable.ajax.reload();
    });

    
    $('.panel .btn-tools').find('button').tooltip({placement:'top'});

});
</script>

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan