Select all rows of datatable

Question

Select all rows of datatable

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to add a checkTodo that marks all the rows of a datatable. each row has its own checkbox that is rendered according to an attribute called 'selectable'. At the moment I managed to totalize the amount of voucher selectable and the sum of the amounts but I need to locate the individual check to be able to mark it and add the class 'selected' to the corresponding rows. I leave my code to see if someone can help me

function obtener_comprobantes_actualizados(idcuenta, ids, ids2, ids3) {
var cant = 0;
var monto = 0;
$("#pnlDeuda").show();

$.ajax({
    type: "POST",
    dataType: "json",
    url: "obtenerDeuda",
    data: { 'idCuenta': idcuenta, 'idSubsistema': ids, 'idSubsistema2': ids2, 'idSubsistema3': ids3 },
    success: function (data) {

        var dataTableVariable = $("#tbComp").DataTable({
            "footerCallback": function (row, data, start, end, display) {
                var api = this.api(), data;

                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };

                total = api
                    .column(6)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                $("#deudaTotal").text("Deuda Total $ " + total);
            },
            "lengthMenu": [[10, 15], [10, 15]],
            "searching": false,
            destroy: true,
            data: data,
            columns: [
                { 'data': 'idComprobante' },
                {
                    'data': "seleccionable",
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, row) {
                        if (data === 1) {
                            return '<input type="checkbox" id="chkFila" />';
                        } else {
                            return '';
                        }
                    }
                },
                { 'data': 'ano' },
                { 'data': 'cuota' },
                { 'data': 'fecVtoForm' },
                { 'data': 'dsEstadoComp' },
                { 'data': 'totalActual' },
            ],
            columnDefs: [
        {
            "targets": [0],
            "visible": false,
        }],
            "language": { "sUrl": "fonts/datatable_espanol.txt" }
        });
        bServerSide: true;
        bProcessing: true;

        $('#tbComp tbody').off('click');
        $('#tbComp tbody').on('click', 'tr', function () {
            $("#frmpago").hide();
            let sel = dataTableVariable.row(this).data().seleccionable;
            let ch = $(this).find("#chkFila");

            if (sel == 0) {
                alertify.error("Comprobante no seleccionable");
            } else {
                let imp_comp = dataTableVariable.row(this).data().totalActual;

                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    monto -= parseFloat(imp_comp);
                    $("#monto").html("Monto a pagar $ " + monto.toFixed(2));
                    cant -= 1;
                    $("#cant").html("Comprobantes Seleccionados: " + cant);
                    ch.prop('checked', false);
                }
                else {
                    $(this).addClass('selected');
                    monto += parseFloat(imp_comp);
                    $("#monto").html("Monto a pagar $ " + monto.toFixed(2));
                    cant += 1;
                    $("#cant").html("Comprobantes Seleccionados: " + cant);
                    ch.prop('checked', true);
                }
            }
        });

        $('#chkTodo').change(function () {
            monto = 0;
            cant = 0;

            if ($(this).is(':checked')) {
                var data = dataTableVariable.rows().data();

                data.each(function (value, index) {
                    if (value.seleccionable === 1) {
                        monto += value.totalActual;
                        cant++;
                        // check checkbox y addClass('selected')
                    }
                });
            }

            if (cant > 0) {
                $("#monto").html("Monto a pagar $ " + monto.toFixed(2));
                $("#cant").html("Comprobantes Seleccionados: " + cant);
            } else {
                $("#monto").html("");
                $("#cant").html("");
            }
        })

    }, error: function () {
        alertify.alert("Ha ocurrido un problema")
    }
})

}

javascript jquery datatables

asked by DavidC 17.12.2018 в 13:32

source

2 answers

0

Give your input checkbox a class and in the event click on the "checkTodo" input, select all the checkboxes with that class.

$(document).ready(function(){+

  $('#checkTodo').click(function(){
    $('.checkbox').prop('checked',true);
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkTodo">

<br>
<input type="checkbox" class="checkbox" value="chek_1">
<input type="checkbox" class="checkbox" value="chek_2">
<input type="checkbox" class="checkbox" value="chek_3">
<input type="checkbox" class="checkbox" value="chek_4">

answered by 17.12.2018 в 14:36

Bar Code Reader and Php how to add dynamic fields using ruby on rails and stimulus js?

score 0 · Accepted Answer

In the end I used the following code, the one proposed by cooper did not work for me because I needed to paint the selectable rows

$('#chkTodo').change(function () {
            monto = 0;
            cant = 0;

            if ($(this).is(':checked')) {
                $('#tbComp tbody tr').each(function () {
                    let sel = dataTableVariable.row(this).data().seleccionable;

                    if (sel == 1) {
                        $(this).addClass('selected');
                        let ch = $(this).find("#chkFila");
                        ch.prop('checked', true);
                        let amount = dataTableVariable.row(this).data().totalActual;
                        cant++;
                        monto += amount;
                    }
                });
            } else {
                $('#tbComp tbody tr').each(function () {
                    $(this).removeClass('selected');
                    let ch = $(this).find("#chkFila");
                    ch.prop('checked', false);
                });
            }

            totalizar();
        })

        function totalizar() {
            if (cant > 0) {
                $("#monto").html("Monto a pagar $ " + monto.toFixed(2));
                $("#cant").html("Comprobantes Seleccionados: " + cant);
            } else {
                $("#monto").html("");
                $("#cant").html("");
            }
        }