JavaScript - Problema al seleccionar checkbox de una tabla dinámica paginada

 
Vista:
sin imagen de perfil

Problema al seleccionar checkbox de una tabla dinámica paginada

Publicado por iKiishi (1 intervención) el 01/03/2017 22:34:07
Hola buenas tardes, soy nuevo en el foro, mi problema es el siguiente;

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 checkbox funcionan perfectos y hacen la suma, pero solo lo hacen en la página 1, al cambiar a la página 2 estan desmarcados y tengo que volver hacer click en "Marcar/desmarcar todos" para que se marquen todos los checkbox de la tabla en la página 2 y me sume el total de la página actual con el de la página anterior y así sucesivamente con las demás páginas;

Me gustaría que al marcar el checkbox de "marcar/desmarcar todos" este me seleccionara todos los checkbox listados en todas las páginas de la tabla dinámica.

El paginador que estoy usando se llama DataTables, acá dejo el código que estoy usando.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<script>
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>
 
<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" />
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder