How to SUM cells from DataTables when checked? - laravel

Question

I want to SUM values from cells when I check then. Like:
I´ve found how on DataTables website but it is not quite like I need.
Will be a lot of data on this table, and I want to SUM their values when the checkbox is checked, the save the total on a variable to pass to a controller.
P.S.: I forgot to say that I am using VueJS. Let´s see some code.
#section('scripts')
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fh-3.1.3/kt-2.3.2/rg-1.0.2/rr-1.2.3/sl-1.2.5/datatables.min.js">
</script>
<script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
isLoading: false,
cliente: '{{ $contemplado->id }}',
checked : false,
nrocpfCnpj: "{!! $contemplado->cpfCnpj !!}",
porte: '{!! $contemplado->porte !!}',
natureza_juridica: '{!! $contemplado->natureza_juridica !!}',
idERP: '{!! $contrato->idERP !!}',
originalSegmento: '{!! $contrato->originalSegmento !!}',
novoSegmento: '{!! $contrato->novoSegmento !!}',
isLoading: false,
grupo: '{!! $contrato->grupo !!}',
cota: '{!! $contrato->cota !!}',
},
mounted() {
const vm = this
var tabela = $('#example').dataTable({
"language": {
'url': '//cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json'
},
'scrollX': true,
'scrollY': false,
'autoWidth': true,
responsive: true,
processing: true,
"ajax": {
"url": "montaTabelaMultiCota",
"data": {
"nrocpfCnpj": vm.nrocpfCnpj
}
},
columns: [
{ data: null,
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<div class='form-check'><input class='form-check-input' type='checkbox' name='cota"+oData['NUMERO-COTA']+"' value='"+oData['VALOR-BEM']+"'></div>")
}
},
{ data: 'CODIGO-GRUPO'},
{ data: 'NUMERO-COTA',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html(oData['NUMERO-COTA'])
}
},
{ data: 'DESCRICAO-BEM'},
{ data: 'VALOR-BEM',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("R$ "+oData['VALOR-BEM']+",00")
}
},
{ data: 'NUMERO-CONTRATO'},
{ data: 'DATA-CONTEMPLACAO',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
moment.locale('pt-br');
var data = oData['DATA-CONTEMPLACAO'];
let criado = moment(data, 'YYYYMMDD').fromNow();
$(nTd).html(criado);
}
},
{ data: 'DATA-ENTREGA',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
moment.locale('pt-br');
var data = oData['DATA-ENTREGA'];
let criado = moment(data, 'YYYYMMDD').fromNow();
$(nTd).html(criado);
}
}
]
});
// Adds the values and updates the readonly input.
function updateTotal(){
$('input#total').val($('input.selected:checked').toArray().reduce(function(last, current){
return last + parseInt($(current).attr('data-value'));
}, 0));
}
// init the total value and bind updateTotal function to the change event on the checkboxes.
function dt_init(){
updateTotal();
$('.selected').off('change').on('change', function(e) {
updateTotal();
});
}
var dt = $('#dt_container').DataTable({
// Add the checkboxes and set the values in a data-* attribute for later
rowCallback: function(row, data){
let value = parseInt($('td:eq(4)', row).html().substring(3))
// $('td:eq(4)', row).html() : 'R$ 12975.00'
// 'R$ 12975.00'.substring(3) : '12975.00'
// parseInt('12975.00') : 12975
$('td:eq(0)', row).html(`<input class="selected" type="checkbox" data-value=${value}>`)
},
// If you need to redraw your table (sort, search, page), then you need to redo some things, that's why dt_init is called upon every time.
initComplete: function(settings, json, param){
// show the footer after the DataTable is done
$(dt.table().footer()).css('display', '');
dt_init();
},
drawCallback: function(settings){
dt_init();
}
});
},
});
</script>
#endsection
Any helps?
Thanks a lot!

Answer 1

You can use a footer in your datatable. Just make it initially invisible and add some boilerplate to show some results.
<table id="dt_container">
<tfoot style="display: none;">
<tr>
<th>Total:</th>
<th><input id="total" type="text" name="total" value="" readonly></th>
</tr>
</tfoot>
</table>
Next, in the javascript init the DataTable but add some callbacks
// Adds the values and updates the readonly input.
function updateTotal(){
$('input#total').val($('input.selected:checked').toArray().reduce(function(last, current){
return last + parseInt($(current).attr('data-value'));
}, 0);
}
// init the total value and bind updateTotal function to the change event on the checkboxes.
function dt_init(){
updateTotal();
$('.selected').off('change').on('change', function(e){
updateTotal();
});
}
var dt = $('#dt_container').DataTable({
// Add the checkboxes and set the values in a data-* attribute for later
rowCallback: function(row, data){
let value = parseInt($('td:eq(4)', row).html().substring(3))
// $('td:eq(4)', row).html() : 'R$ 12975.00'
// 'R$ 12975.00'.substring(3) : '12975.00'
// parseInt('12975.00') : 12975
$('td:eq(0)', row).html(`<input class="selected" type="checkbox" data-value=${value}>`)
},
// If you need to redraw your table (sort, search, page), then you need to redo some things, that's why dt_init is called upon every time.
initComplete: function(settings, json, param){
// show the footer after the DataTable is done
$(dt.table().footer()).css('display', '');
dt_init();
},
drawCallback: function(settings){
dt_init();
}
});