F�rum Alterar de Lugar o resultado dataTable #620114

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


<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>

<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

Curtir t�pico

+ 0

Responder

Post mais votado

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

Frank Hosaka

Responder

Gostei + 1

Mais Posts

14/06/2023

Frank Hosaka

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>

Responder

Gostei + 0

14/06/2023

Willian Silva

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

Responder

Gostei + 0

15/06/2023

Willian Silva

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

Responder

Gostei + 0