1

tengo una consulta:

Quiero obtener el valor de la fila de mi datatable, solo de las filas seleccionadas por un checkbox al dar click a mi boton y esos valores tenerlo en un json.

HTML

$(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
      let price = info.Precio;
      total += this.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" />-->
<br>
<button id="btnObtener">Obtener</button>

7
  • Cual es el problema con tu codigo?
    – alanfcm
    Commented el 9 dic. 2019 a las 19:33
  • quiero obtener los valores de la fila seleccionada con el checkbox al dar click en el boton, por ejemplo si selecciono el checkbox de la primera fila deberia traerme leche,50,3.2 en un json despues de dar click al boton
    – Dum
    Commented el 9 dic. 2019 a las 19:35
  • hola <button id="..." onclick="fnObtener()"</button> antes de cerrar el body <script ...> function fnObtener(){ for ... validar atributo checked y hacer algo } </script>
    – quevedo
    Commented el 9 dic. 2019 a las 19:46
  • Esta pregunta se parece muchísimo a la que formulaste ayer: ¿Como obtener los datos de la fila seleccionada del checkbox al dar clic a un boton? Te sugiero cerrar una de las dos.
    – quevedo
    Commented el 9 dic. 2019 a las 19:57
  • Estimado @quevedo sé como crear el evento onclick lo que no sé es como obtener el valor de la fila cuando el checkbox este seleccionado y en que lugar de mi código ubicarlo para ese método.
    – Dum
    Commented el 9 dic. 2019 a las 20:08

3 respuestas 3

1

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>

0

Si lo que estás buscando es conseguir el row que tenga los checkbox seleccionados, te ofrezco el siguiente selector de jQuery.

$("tbody input:checked :parent tr").each(function(index, fila) {
    //Aquí lo que necesites...
});

Con este selector, tendrás todos los TR que tengan un input seleccionado dentro del body.

Donde pone "//Aquí lo que necesites..." podrías usar un $(fila).find("#myId").val(); para obtener el valor de un elemento concreto.

Un saludo!

2
  • Estimado eso también tomaría en cuenta las filas si la tabla esta paginada.
    – Dum
    Commented el 9 dic. 2019 a las 22:23
  • Si está paginado, los registros no se mostrarán en la tabla, si no los estás mostrando... No puedes seleccionarlos, salvo que los tengas guardados en localstorage (puedes guardar los TR, así acceder después a todo), por ejemplo, podrías guardar una lista por cada página con las filas marcadas en esa página Commented el 9 dic. 2019 a las 22:28
0

debes usar el dataTableSelect

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

y en el js haces algo así

$(document).ready(function() {
  var table = $('#dataTable').DataTable( {
      columnDefs: [ {
          orderable: false,
          className: 'select-checkbox',
          targets:   0
      } ],
      select: {
          style:    'multi', //'os' para seleccion unica 
          selector: 'td:first-child'
      },
      lengthMenu: [[10, 20, 30, -1], [10, 20, 30, "All"]]
  });  
  
  $('#vender').on('click', function (event) {
    event.preventDefault();

    
    $('#form').find('input[type="hidden"]').remove();
    var seleccionados = table.rows({ selected: true });
    
    if(!seleccionados.data().length){

        $('<input>', {
          type: 'hidden',
          value: '',
          name: 'ids[]'
      }).appendTo('#form');
        
        $("#form").submit(); //submiteas el form
      
    }else{
      seleccionados.every(
        function(key, data){

        $('<input>', {
            type: 'hidden',
            value: this.data()[1],
            name: 'ids[]'
        }).appendTo('#form');

        
        $("#form").submit(); //submiteas el form
      }); 
    }
});
} );

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.