events on objects

events on objects

Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

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.

Answers

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

    sorry, I sent the wrong image

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin
    Answer ✓

    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

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin
    Answer ✓

    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

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

    @allan, thank you very much

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

    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!

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0
    edited March 29

    This is the Js :smile:

    $(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.

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin
    Answer ✓

    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

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 20,258Questions: 26Answers: 4,763
    edited March 30 Answer ✓

    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

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

    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();
        }
    });
    

    });

  • kthorngrenkthorngren Posts: 20,258Questions: 26Answers: 4,763
    Answer ✓

    Do you have this working?

    Kevin

  • Diego1966Diego1966 Posts: 20Questions: 4Answers: 0

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

Sign In or Register to comment.