Datatable doesn't work with multitables?

xiul

My issue here is that the variable of the second and third table don't keep the value of datable but the first one do it well. Anybody knows if datatable is able to handle more than one table at the same time. I post my code below:

        $(document).ready(function() {
            var table = $('#listasocios').DataTable();

            $('#listasocios tbody').on('click', 'tr', function () {
                if ( $(this).hasClass('selected') ) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                //alert(table + ", " + JSON.stringify(table));
                var renglon = table.row( this ).data();
                var detalle = $("#detalle-table").DataTable({
                    "ajax": {
                        url: "ajax/cargar_reportedetalle",
                        type: "POST",
                        data: {
                            "idsocio": renglon[0]
                        },
                        dataSrc: ""
                    },
                    columns: [
                        { data: "contador" },
                        { data: "noeconomico" },
                        { data: "marca" },
                        { data: "modelo" },
                        { data: "placas" },
                        { data: "tipounidad" },
                        { data: "socio" },
                        { data: "km" },
                        { data: "estatus" },
                        { data: "serie"}
                    ],
                    columnDefs: [
                        { className: "cssbold text-center", targets: [0] },
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    "autoWidth": false
                });
                //alert(detalle + ", " + JSON.stringify(detalle));
                var resumen = $("#resumen-table").DataTable({
                    "ajax":{
                        url: "ajax/cargar_reporteresumen",
                        type: "POST",
                        data: {
                            "idsocio": renglon[0]
                        },
                        dataSrc: ""
                    },
                    columns: [                            
                        { data: "unidad" },
                        {
                            "className":      'details-control',
                            "orderable":      false,
                            "data":           null,
                            "defaultContent": ''
                        },
                        { data: "marca" },
                        { data: "detenidos" },
                        { data: "activos" },
                        { data: "porparar" },
                        { data: "accidentados" },
                        { data: "cantidad"}
                    ],
                    columnDefs: [
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    paging: false,
                    info: false,
                    order: [[1, 'asc']]
                });
                //alert(detalle + ", " + JSON.stringify(detalle));
                $("#reportes").modal("show");
            });

            $('#detalle-table tbody').on('click', 'tr', function () {
                alert("You have clicked here!!");
            });

            $('#resumen-table tbody').on('click', 'td.details-control', function () {
                alert("You have clicked here!!");                    
            });
        });

As you can see when I click one row of the second of third table it never trigger the alert inside.
Even when I try to get the variable value with an alert it's shown as undefined, or just crash: alert(detalle); or alert(detalle + ", " + JSON.stringify(detalle));

kthorngren

try to get the variable value with an alert it's shown as undefined

It looks like the variables are defined within the scope of the $('#listasocios tbody').on('click', 'tr', function () function. This being the case they are not available outside that function. You will need to define them globally.

click one row of the second of third table it never trigger the alert inside.

$('#detalle-table tbody').on('click', 'tr', function () {
        alert("You have clicked here!!");
    });

My guess is the tbody tags is not in the HTML when the click handlers are initialized so there is nothing to attach them to. You will want to use delegated events. See this faq and this doc:
https://learn.jquery.com/events/event-delegation/

Something like this should work:

$('#detalle-table').on('click', 'tbody tr', function () {
        alert("You have clicked here!!");
    });

Kevin

xiul

Thanks kthorngren, my tbody was in my HTML table, the problem here was the scope as you said.