Alterar de Lugar o resultado dataTable

JavaScript

Dandelion DataTables

14/06/2023

Boa tarde estou usando o script datatable para somar automaticamente o filtro, esta funcionando corretamente porem gostaria de alterar o local onde o resultado e mostrado abaixo o script que estou usando .Ele aparece no fim da tabela gostaria que ele ficasse acima da tabela em um card do bootstrap

<!-- Datatables JS-->
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
<!-- SUM() Datatables-->
<script src="https://cdn.datatables.net/plug-ins/1.10.20/api/sum().js"></script>
<script type="text/javascript" class="init">


$(document).ready(function(){
var tabla = $("#example").DataTable({
"createdRow":function(row,data,index){
//pintar una celda
if(data[4] >= 1000){
/* $('td', row).eq(5).css({
'background-color':'#ff5252',
'color':'white',
}); */

//pintar una fila
$('td', row).css({
'background-color':'#ff5252',
'color':'white',
'border-style':'solid',
'border-color':'#bdbdbd'
});
}
},
"drawCallback":function(){
//alert("La tabla se está recargando");
var api = this.api();
$(api.column(4).footer()).html(
'Total: '+api.column(4, {page:'current'}).data().sum().toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
)
}

});

//1era forma para sum()
//var tot = tabla.column(5).data().sum();
//$("#total").text(tot);
});
</script>
Willian Silva

Willian Silva

Curtidas 0

Melhor post

Frank Hosaka

Frank Hosaka

15/06/2023

1) a minha sugestão é colocar um <div> acima do <table>, assim:

<div id=novototal style=text-align:right></div>
<table id="example" class="display" style="width:100%">


2) e mudar o código JavaScript de

$(api.column(4).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');


para
$('#novototal').html('Novo Total $' + pageTotal + ' ( $' + total + ' total)');
GOSTEI 1

Mais Respostas

Frank Hosaka

Frank Hosaka

14/06/2023

Eu não consegui executar o seu código, assim improvei um outro, espero que ajude:
<input id=total>
<table id="example"><thead><tr><th><th></thead>
    <tbody>
    <tr><td>joao<td>1
    <tr><td>pedro<td>2 
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
    $('#example').DataTable();
    $('#total').val("Meu nome é Frank");
});
</script>
GOSTEI 0
Willian Silva

Willian Silva

14/06/2023

Obrigaod pela resposta , estou usando o codigo deste link , o valor fica no final da pagina, preciso que ele fique em cima do local perto da escolha das quantidades de paginas

https://datatables.net/examples/advanced_init/footer_callback.html

GOSTEI 0
Willian Silva

Willian Silva

14/06/2023

Muito Obrigado , era exatamente isso que eu precisava, consegui configurar para o que eu precisava com sua ajuda
GOSTEI 0
POSTAR