2

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

5
  • Hola, no entendí bien tú pregunta.
    – iKiishi
    Commented el 18 feb. 2017 a las 15:29
  • Creo que pude dar con la solución, leyendo en la página de DataTables desactive el botón de ordenar por la columna 0 (la del checkbox), y ahora si cuando cambio de página si me hace la suma sin alterar la suma que había hecho en la página anterior.
    – iKiishi
    Commented el 18 feb. 2017 a las 15:32
  • Mi pregunta es, supongamos que tienes 100 productos paginados de a 25, es decir, un total de 4 páginas... al activar el checkbox, el total ¿debería ser la suma de los 100 o solo de los 25 listados en la página actual?
    – Marcos
    Commented el 18 feb. 2017 a las 15:36
  • Hola, pues lo ideal sería que al marcar el checkbox sumara los 100 productos listados en las 4 páginas.
    – iKiishi
    Commented el 18 feb. 2017 a las 15:42
  • Hola, ¿alguna solución para este problema?
    – iKiishi
    Commented el 1 mar. 2017 a las 23:45

1 respuesta 1

1

En base a este comentario:

pues lo ideal sería que al marcar el checkbox sumara los 100 productos listados en las 4 páginas.

Una posible solución sería la siguiente:

  • Cuando se hace click en el checkbox del encabezado (thead), buscamos los datos de todos registros de la tabla (dt.data()), y dependiendo de si está o no checked, los sumamos y check-eamos; o dejamos el total en cero y descheck-eamos.

  • Cuando se hace click en el checkbox de un registro (tbody), buscamos las datos solo de ese registro y si dependiendo de si está checked, sumamos o restamos al total.

Así por ejemplo:

$(document).ready(function(){
  let $dt = $('#tbl-buys');
  let dt = $dt.DataTable({
    order:[[1, 'asc']],
    columnDefs: [{
      targets: 0,
      orderable: false
    }]
  });
  let $total = $('#total');
  
  // Cuando hacen click en el checkbox del thead
  $dt.on('change', 'thead input', function (evt) {
    let checked = this.checked;
    let total = 0;
    let data = [];
    
    dt.data().each(function (info) {
      var txt = info[0];
      if (checked) {
        total += parseFloat(info[3]);
        txt = txt.substr(0, txt.length - 1) + ' checked>';
      } else {
        txt = txt.replace(' checked', '');
      }
      info[0] = txt;
      data.push(info);
    });
    
    dt.clear().rows.add(data).draw();
    $total.val(total);
  });
  
  // Cuando hacen click en los checkbox del tbody
  $dt.on('change', 'tbody input', function() {
    let info = dt.row($(this).closest('tr')).data();
    let total = parseFloat($total.val());
    let price = parseFloat(info[3]);
    total += this.checked ? price : price * -1;
    $total.val(total);
  });
});
<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" />

9
  • Hola, muchisimas gracias, me funciono perfecto.
    – iKiishi
    Commented el 6 mar. 2017 a las 20:01
  • Hola, buenas noches, tengo un pequeño problema que me surgio reciente, resulta que por cada registro listado en la DataTables necesito enviar un valor que saco de la base de datos, esto lo haría a traves de los checkbox algo así echo '<td><input type="checkbox" name="certificado[]" value="'.$certificado.'"/></td>', resulta que cuando hago el envio de los datos a traves del formulario el array con los valores de los checkbox seleccionados no llega, revisando el código que me pasaste vi que el info[0] me reemplaza los checkbox de la DataTable que tiene el valor de BD.
    – iKiishi
    Commented el 11 mar. 2017 a las 3:12
  • Habrá alguna manera de que cuando le de al checkbox de marcar/desmarcar todos me tome los valores de los checkbox seleccionados y los coloque en un array en JavaScript para agregarlo al info[0] que me reemplaza los checkbox de la DataTables, no sé si es muy confusa mi petición, de ante mano muchas gracias y disculpa las molestías.
    – iKiishi
    Commented el 11 mar. 2017 a las 3:19
  • Hola y muchas gracias por la ayuda de verdad lo aprecio, y disculpa tanta molestía, apenas estoy aprendiendo en el JS. Hay otro problema, solo me toma el valor de los checkbox en la primera página del datatables.
    – iKiishi
    Commented el 11 mar. 2017 a las 4:11
  • Listo, entonces haré otra pregunta gracias.
    – iKiishi
    Commented el 11 mar. 2017 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.