Checkbox "check/uncheck all" with pager DataTable

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="http://ift.tt/1kADMQ3"></script>
<link href="http://ift.tt/2fNauUr" 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" />