Duplicated bootgrid header and footer

Question

Good afternoon! I use the bootgrid to mount a table and an error started to occur.

Error: Once the table is loaded (in the correct way, with search bar and footer we have the navigation bar between pages), after a short interval (never standardized), the search and paging bars are duplicated.

Note: The pagination bar that appears after is related to the amount of registration presented at that time, so it always appears with 1 page.

Code:

var html='<table id="grid-data" class="table table-hover table-striped tablerecords tabelas" >'+
                    '<thead>'+
                    '<tr>' +
                        '<th style="text-align:center;" scope="col" data-column-id="id" data-formatter="ident" data-sortable="false" data-header-align="center" data-visible="false">ID</th>'+
                        '<th  scope="col" data-column-id="dateStart" data-header-align="center">Date</th>'+
                        '<th  scope="col" data-column-id="StartTime" data-header-align="center"> Start time</th>'+
                        '<th  scope="col" data-column-id="endTime" data-header-align="center"> End Time</th>'+
                        '<th  scope="col" data-column-id="duration" data-header-align="center" data-visible="false"> Duration</th>'+
                        '<th  scope="col" data-column-id="callingParty" data-formatter="calling" data-header-align="center"> Calling Party</th>' +
                        '<th  scope="col" data-column-id="calledParty" data-formatter="called" data-header-align="center"> Called Party</th>'+
                        '<th  scope="col" data-column-id="direction" data-header-align="center">Direction</th>'+
                        '<th  scope="col" data-column-id="fullName" data-header-align="center"> Full Name</th>'+
                        '<th scope="col" data-column-id="businessData"> Business Data</th>'+
                        '<th  scope="col" data-column-id="path" data-formatter="commands" data-sortable="false" data-header-align="center"> Play</th>'+
                        '<th  scope="col" data-column-id="deviceType" data-header-align="center"> Device type</th>'+
                        '<th  scope="col" data-column-id="server" data-header-align="center" data-visible="false"> Server</th>'+
                        '</tr>'+
                        '</thead>'+
                        '<tbody>';

// Codigo que preenche dinamicamente as linhas da tabela

$331("#tabelas").append(html+htmlType+"</tbody></table>");//a variavel htmlType tem o corpo da tabela. o $331 eh a versao do Jquery que uso (como a página usa duaa versões diferentes, usei o jQuery.noConflict()

//montagem do bootgrid
var grid =$331("#grid-data").bootgrid({
                // labels:traducao,
                caseSensitive:false,
                formatters:{
                    "ident":function(column,row)
                    {
                        return "<abbr title='"+ row.id +"' onclick=\"copiarTexto('"+row.id+"');\"><i class='fas fa-id-card fa-2x'></i></abbr>"
                    },

                    "commands":function(column,row)
                    {
                        var path="";
                        if(row.path){
                            //var path= "\'"+"\\\\"+lista[i]["Path"]+"\'";
                            if(row.deviceType=="tipo1"){
                                path="\'"+"Server1\\Media\\"+row.path+"\'";
                            }
                            else if(row.deviceType=="tipo2"){
                                var path="\'"+"Server2\\sc\\"+row.path+"\'";
                            }
                            else if(row.deviceType=="tipo3"){
                                var caminho=row.path.split("\\")
                                var path="\'"+"Server3\\StorageCenter\\"+caminho[0]+"\\"+row.path+"\'";
                            }

                            path=findAndreplace(path,"\\","/");
                            path=findAndreplace(path," ","__");
                            //var _id=String(row.id);

                            return '<a href="javascript:playMusica('+path+',1)"><i class="fas fa-volume-up IconAudio"></i></a>';
                            //"javascript:playMusica('+path+',1)"
                        }
                        else{
                            return "<abbr title='Sem arquivo de áudio!' style='color:red;'><i class='fas fa-times iconeX'></i></abbr>";
                        }

                    },

                    "calling":function(column,row)
                    {
                        if (typeof(row.callingParty)==="undefined" ||row.callingParty=="undefined" ) return ("-");
                        else  return (row.callingParty);
                    },

                    "called":function(column,row)
                    {
                        if (typeof(row.calledParty)==="undefined" ||row.calledParty=="undefined" ) return ("-");
                        else  return (row.calledParty);
                    },
                }
            }).on("loaded.rs.jquery.bootgrid", function(){
                /* Executes after data is loaded and rendered */
                grid.find(".IconAudio").on("click", function(e)
                {                   
                    $331("#myModal").show();
                });
            });
        }