Tengo una tabla dinámica mostrando registros de mysql (`id,producto,cantidad,precio`), cada registro tiene un `checkbox` y otro `checkbox` **"marcar/desmarcar todos"**, que me hace la suma de los productos listados y los muestra en un `input:text` llamado **total**.

La tabla dinámica tiene un paginador ya que se cargan muchos registros de la base de datos, los `checbox` funcionan perfectos y hacen la suma;

El problema empieza cuando paso a la página 2 de la tabla dinámica el checkbox "marcar/desmarcar todos" queda activo de la primera página y cuando lo desmarco me quita la suma hecha en la primera página, los checkbox de cada registro si funcionan perfectamente cuando paso a la siguiente página, acá dejo el código que amablemente una usuario de acá me hizo, el paginador que estoy usando se llama `DataTables`.

Gracias de antemano.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    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();
    });

<!-- language: lang-html -->

    <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" />

<!-- end snippet -->