events on objects

Diego1966

Good evening, sorry for the inconvenience, I would like to take this opportunity to wish you all a peaceful Easter holiday.
I wanted to ask if in datatable there is the possibility of activating events in response to actions carried out on objects of the DataTable, that is, on two parent/child tables, I need to reset the child table when I click on the paginator buttons, or when I write in the search box, or when I click on the "X" of the search box, I attach an image that explains my question, thanks for any support.

Diego1966

sorry, I sent the wrong image

allan

Possibly the draw event is what you want, but that will trigger for every draw of the host table. You could check in it if anything that needs to cause a reset has changed - search() and page.info() for example.

Allan

allan

There are other events such as search and length, etc which might be useful, but I think draw is probably the catch all that you want.

Allan

Diego1966

@allan, thank you very much

Diego1966

unfortunately the methods you suggested don't work, or I'm probably wrong, I tried the three methods but it blocks the child, it doesn't return any value even at the start.
I don't know what to do, and it's important that I find the solution!

Diego1966

This is the Js

$(document).ready(function () {
    //initialization of employee table
    let table = $('#example').DataTable({
        "ajax": {
            "url": "../php/dipendente.php",
            "dataSrc": "data"
        },
        "order": [[1, 'asc']],
        "language": {
            "url": "../json/italiano.json"
        },
        "columnDefs": [
            {
                "targets": [0], // Index of the column to hide (0 for the first column)
                "visible": false, // Set column visibility to false
                "searchable": false// Prevents searching on the column
            }
        ]
    });

    // IInitializing the badge table
    let badgeTable = $('#mytable').DataTable({
        columns: [
            {data: 'idbadge'},
            {data: 'iddip'},
            {data: 'nbadge'},
            {data: 'strmagn'},
            {data: 'nfc'},
            {data: 'richiesto'},
            {data: 'rilascio'},
            {data: 'causale'},
            {data: 'rilascioper'},
            {data: 'foto'}
        ],
        "order": [[1, 'asc']],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/2.0.3/i18n/it-IT.json"
        },
        "columnDefs": [
            {
                "targets": [0], // Indices of the columns to hide (0 for idbadge, 1 for iddip)
                "visible": false, //Set column visibility to falseo
                "searchable": false // Prevents searching on hidden columns
            }
        ]
    });

    // Handling the search.dt event on the main table
    table.on('search.dt', function () {
        badgeTable.clear().draw(); // Clears the badge table when a search is performed
    });

 // Handle the page.dt event on the main table
    table.on('page.dt', function () {
        badgeTable.clear().draw(); // Clear the badge table when changing pages

    // Management of clicking on a row of the employee table
    $('#example tbody').on('click', 'tr', function () {
        var data = table.row(this).data();
        var iddip = data[0]; //takes the employee ID to be in the first column
       // AJAX call to get the badges associated with the selected employee
        $.ajax({
            url: "../php/badge.php",
            type: 'GET',
            dataType: 'json',
            data: {
                iddip: iddip
            },
            success: function (response) {
                // Add the new data to the badge table
                badgeTable.rows.add(response.data).draw();
            },
            error: function (xhr, status, error) {
              // Error handling
                console.error(xhr.responseText);
            }
        });
    });
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'm not sure what you mean by "blocks the child". Perhaps you can link to a test page showing the issue, so I can help, please.

Allan

Diego1966

I meant that the methods I tried, lock the lower table and does not load the data on click in the upper table

kthorngren

Looks liek you have a syntax error:

 // Handle the page.dt event on the main table
    table.on('page.dt', function () {
        badgeTable.clear().draw(); // Clear the badge table when changing pages

You are missing the closing });. Could be a copy and paste error but it should look like this:

 // Handle the page.dt event on the main table
    table.on('page.dt', function () {
        badgeTable.clear().draw(); // Clear the badge table when changing pages
    });

I copied your code here with a couple changes and it works:
https://live.datatables.net/releyaki/1/edit

If you still have issues take a look at the browser's console for errors. To help debug we will need to see the issue. Please post a link to a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Diego1966

Hi Kevin, thank you for your interest, after reading the user manual, the A.P.I. , the methods, and the events, in the end I got there, you have to be patient, I'm a neophyte and I really want to learn because I really like programming, I'll post the code I wrote, the only difference is that I positioned the two events : "search dt" and "page dt" at the end of the script.

Thank you again, happy Easter
Diego

the code:

$(document).ready(function () {
// Inizializzazione della tabella dei dipendenti
let table = $('#example').DataTable({
"ajax": {
"url": "../php/dipendente.php",
"dataSrc": "data"
},
"order": [[1, 'asc']],
"language": {
"url": "../json/italiano.json"
},
"columnDefs": [
{
"targets": [0, 1], // Indice della colonna da nascondere (0 per la prima colonna)
"visible": false, // Imposta la visibilità della colonna su falso
"searchable": false // Impedisce la ricerca sulla colonna
}
]
});

// Inizializzazione della tabella dei badge
let badgeTable = null;

// Gestione del click su una riga della tabella dei dipendenti
$('#example tbody').on('click', 'tr', function () {
    var data = table.row(this).data();
    var iddip = data[0]; // Assume che l'ID del dipendente sia nella prima colonna

    // Se la tabella dei badge esiste già, distruggila
    if (badgeTable) {
        badgeTable.destroy();
    }

    // Chiamata AJAX per ottenere i badge associati al dipendente selezionato
    $.ajax({
        url: "../php/badge.php",
        type: 'GET',
        dataType: 'json',
        data: {
            iddip: iddip
        },
        success: function (response) {
            // Inizializzazione della nuova tabella dei badge
            badgeTable = $('#tabella-badge').DataTable({
                data: response.data,
                columns: [
                    {data: 'idbadge'},
                    {data: 'iddip'},
                    {data: 'nbadge'},
                    {data: 'strmagn'},
                    {data: 'nfc'},
                    {data: 'richiesto'},
                    {data: 'rilascio'},
                    {data: 'causale'},
                    {data: 'rilascioper'},
                    {data: 'foto'}
                ],
                "searching": false, // Disabilita la casella di ricerca nella tabella badge
                "order": [[1, 'asc']],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/2.0.3/i18n/it-IT.json"
                },
                "columnDefs": [
                    {
                        "targets": [0, 1], // Indici delle colonne da nascondere (0 per idbadge, 1 per iddip)
                        "visible": false // Imposta la visibilità delle colonne su falso
                    }
                ]
            });
        },
        error: function (xhr, status, error) {
            // Gestione degli errori
            console.error(xhr.responseText);
        }
    });
});

// Gestione dell'evento di ricerca nella tabella principale
table.on('search.dt', function () {
    if (badgeTable) {
        badgeTable.clear().draw();
    }
});

// Gestione degli eventi di paginazione nella tabella principale
table.on('page.dt', function () {
    if (badgeTable) {
        badgeTable.clear().draw();
    }
});

});

kthorngren

Do you have this working?

Kevin

Diego1966

yes yes...it works perfectly, thank you very much