Skip to main content
2 de 3
mejorar la visualización del código
Marcos
  • 35.7k
  • 7
  • 36
  • 70

Problema checkbox "seleccionar todo" con páginador y suma de valores

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.

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