Good afternoon!
I use bootgrid
to mount a table and an error started to occur.
Error: Once the table is loaded (the correct way, with the search bar and in the footer we have the navigation bar between pages), after a short interval (never standardized), the search and paging bars are duplicated.
Note:Thepagingbarthatappearsnextreferstotheamountofregistrationpresentedatthattime,soitalwaysappearswith1page.
Code:
varhtml='<tableid="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();
});
});
}