Question posted in 
I’ve a dynamic table showing registers of mysql (id, product, quantity, price), each register has a checkbox, and the other checkbox “check/uncheck all” which make a sum of products on the lists and show on a input:text called total.
The dynamic table has a pager, because it uploads a lot of register of the data base, the checkbox work perfectly, and make the sum, but it just do it on the page 1, when I change to the page 2, this are unmark, and I have to click in “check/uncheck all” to be able to mark all the checkbox of the table on page 2, and sum the total of the actual page with the last page, and so on.
I’d like to mark the checkbox of “check/uncheck all” and this could select all the checkbox list of all pages of the dynamic table;
Sorry for my bad english and thanks.
The pager that I’m concurrently working on its call DataTables, and this is the code that I’m using:
let buys = document.getElementById('tbl-buys');
let cboxAll = buys.querySelector('thead input[type="checkbox"]');
let cboxes = buys.querySelectorAll('tbody input[type="checkbox"]');
let totalOutput = document.getElementById('total');
let total = 0;
[].forEach.call(cboxes, function (cbox) {
cbox.addEventListener('change', handleRowSelect);
});
cboxAll.addEventListener('change', function () {
[].forEach.call(cboxes, function (cbox) {
//cbox.checked = cboxAll.checked;
cbox.click();
});
});
function handleRowSelect (e) {
let row = e.target.parentNode.parentNode;
let qty = row.querySelector('td:nth-child(3)').textContent;
let price = row.querySelector('td:nth-child(4)').textContent;
let cost = Number(qty) * Number(price);
if (e.target.checked) {
total += cost;
} else {
total -= cost;
}
total = Number(total.toFixed(2));
totalOutput.value = total;
}
$(document).ready(function(){
$('#tbl-buys').DataTable({
"columnDefs": [ { orderable: false, targets: [0] }],
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered" data-page-length='2' id="tbl-buys">
<thead>
<tr>
<th>
<input type="checkbox"/>
</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Laptop Dell XPS 15</td>
<td>1</td>
<td>782.49</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Mouse bluetooth solar</td>
<td>1</td>
<td>19.90</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Sony Headphones 1000px</td>
<td>1</td>
<td>29.90</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>Intel x99</td>
<td>1</td>
<td>200.00</td>
</tr>
</tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />
2
Answers
My solution keeps track of the what is checked and what is not in the data object associated with the datatable.
It uses the drawCallback option to keep the displayed page in sync with the data object.
I added a sum function to the datatable for summing the salary column for checked rows.
its running at http://jsbin.com/joxiri/edit?html,js,output
Using the checkbox plugin, I do not need to keep track of the checkboxes anymore.
Because his plugin marks a row as selected when checked, I don’t have to mark the data as being checked anymore either.
the sum function simple gets the selected rows and totals them. I put the total at the bottom of the salary column.
This code works in my own environment but could not put it in jsbin since I am using ajax to get the data from a web service on my box.
I also used a different plugin, called autoNumeric to format the total.