0

tengo una consulta y es la siguiente:

Tengo un checkbox en mi datatable en el <thead> para seleccionar todos los checkbox del <tbody> y lo que quiero es que al seleccionar todos los checkbox y luego al modificar un checkbox de las filas se ponga un guión en el checkbox del <thead> asi como el siguiente ejemplo: https://jsfiddle.net/gyrocode/abhbs4x8/

$(document).ready(function() {
  function crearTabla(datos) {
    let $dt = $('#tbl-buys');
    let dt = $dt.DataTable({
      data: datos,
      order: false,
      columns: [{
          render: function(data, type, full, meta) {
            // ACA controlamos la propiedad para des/marcar el input
            return "<input type='checkbox'" + (full.checked ? ' checked' : '') + "/>";
          },
          orderable: false
        },
        {
          data: 'Producto',
          orderable: false
        },
        {
          data: 'Cantidad',
          orderable: false
        },
        {
          data: 'Precio',
          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) {
        // ACA cambiamos el valor de la propiedad
        info.checked = checked;
        // ACA accedemos a las propiedades del objeto
        if (info.checked) total += info.Precio;
        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());
      // ACA accedemos a las propiedades del objeto
      info.checked = this.checked;
      let price = info.Precio;
      total += info.checked ? price : price * -1;
      $total.val(total);
    });
  }

  crearTabla([{
      "Producto": "Leche",
      "Cantidad": 50,
      "Precio": 3.20
    },
    {
      "Producto": "Azucar",
      "Cantidad": 40,
      "Precio": 2.20
    },
    {
      "Producto": "Gaseosa",
      "Cantidad": 14,
      "Precio": 6.50
    }
  ]);
});
<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></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

4
  • ¿Y porqué no tomas la parte del link del fiddle y lo acoplas a tu proyecto?
    – Lucía
    Commented el 12 dic. 2019 a las 14:12
  • porque me parece que allí usa una librería y yo no estoy trabajando con esa.
    – Dum
    Commented el 12 dic. 2019 a las 14:19
  • ¿Podrías editar tu pregunta añadiendo qué librerías usas y qué usas para el código?
    – Lucía
    Commented el 12 dic. 2019 a las 14:20
  • Las librerías están en el código mostrado para ejecutar y la data que llena el datatable también esta.
    – Dum
    Commented el 12 dic. 2019 a las 14:43

1 respuesta 1

2

Para poner la linea en el checkbox debes activar la propiedad "indeterminate"

$(document).ready(function() {
  function crearTabla(datos) {
    let $dt = $('#tbl-buys');
    let dt = $dt.DataTable({
      data: datos,
      order: false,
      columns: [{
          render: function(data, type, full, meta) {
            // ACA controlamos la propiedad para des/marcar el input
            return "<input type='checkbox'" + (full.checked ? ' checked' : '') + "/>";
          },
          orderable: false
        },
        {
          data: 'Producto',
          orderable: false
        },
        {
          data: 'Cantidad',
          orderable: false
        },
        {
          data: 'Precio',
          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) {
        // ACA cambiamos el valor de la propiedad
        info.checked = checked;
        // ACA accedemos a las propiedades del objeto
        if (info.checked) total += info.Precio;
        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());
      // ACA accedemos a las propiedades del objeto
      info.checked = this.checked;
      let price = info.Precio;
      total += info.checked ? price : price * -1;
      $total.val(total);

      /**  NUEVO CÓDIGO */
      /**  Verificar si todos están seleccionados */
      let countSelected = 0
      let countTotal = 0
      dt.data().each(function(info) {
        countTotal += 1;
        if (info.checked){
          countSelected +=1 ;
        }
      });

      /** Actualizamos UI según caso */
      if(countSelected===countTotal){
        $('thead input').prop("checked", true);
        $('thead input').prop("indeterminate", false);
      }else if(countSelected===0){
        $('thead input').prop("checked", false);
        $('thead input').prop("indeterminate", false);
      }else{
        $('thead input').prop("checked", false);
        $('thead input').prop("indeterminate", true);
      }
      /** END NUEVO CÓDIGO */

    });
  }

  crearTabla([{
      "Producto": "Leche",
      "Cantidad": 50,
      "Precio": 3.20
    },
    {
      "Producto": "Azucar",
      "Cantidad": 40,
      "Precio": 2.20
    },
    {
      "Producto": "Gaseosa",
      "Cantidad": 14,
      "Precio": 6.50
    }
  ]);
});
<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></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

2
  • Estimado @ivesklein por momentos deja de funcionar la propiedad indeterminate y deja de mostrarse y la única solución que hago es limpiar cache para que vuelva a funcionar y me resalta este código let info = dt.row($(this).closest('tr')).data(); con el siguiente error jquery.dataTables.js:8109 Uncaught TypeError: Cannot read property '_aData' of undefined
    – Dum
    Commented el 2 ene. 2020 a las 21:52
  • Deja de mostrarse porque la ejecución termina inesperadamente en el código que dices(info = dt.row($(this).closest('tr')).data()) todo lo que sigue no se ejecuta. Tienes que corregir la parte que calcula el total.
    – ivesklein
    Commented el 20 ene. 2020 a las 15:57

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.