Skip to main content
Commonmark migration
Origen Enlace

###Ejemplo

Ejemplo

###Ejemplo

Ejemplo

se añadieron 3 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70
  • Suscribir una función al evento click del botón #btnObtener
  • En dicha función necesitas usar el método dt.data().toArray()dt.data().toArray() para obtener un arreglo con los datos de todos los registros, iterar dicho arreglo y utilizar la propiedad checked para filtrar los seleccionados
  • Suscribir una función al evento click del botón #btnObtener
  • En dicha función necesitas usar el método dt.data().toArray() para obtener un arreglo con los datos de todos los registros, iterar dicho arreglo y utilizar la propiedad checked para filtrar los seleccionados
  • Suscribir una función al evento click del botón #btnObtener
  • En dicha función necesitas usar el método dt.data().toArray() para obtener un arreglo con los datos de todos los registros, iterar dicho arreglo y utilizar la propiedad checked para filtrar los seleccionados
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

La solución a tu problema es:

  • Suscribir una función al evento click del botón #btnObtener
  • En dicha función necesitas usar el método dt.data().toArray() para obtener un arreglo con los datos de todos los registros, iterar dicho arreglo y utilizar la propiedad checked para filtrar los seleccionados

###Ejemplo

$(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);
    });
  }
  
  // ACA suscribimos un listener
  $('#btnObtener').on('click', function() {
    let dt = $('#tbl-buys').DataTable();
    let checkeds = dt.data().toArray().filter((data) => data.checked);
    console.log(checkeds);
  });

  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" />-->
<br>
<button id="btnObtener">Obtener</button>