The example with Modal (responsive table) from the official Datatables.net website doesn't work

denisPF

Hello colleagues!

I'm trying to reproduce the example from the page https://datatables.net/extensions/responsive/examples/display-types/modal.html with a modal with table row details being displayed when clicking on the first column. I made the imports of CSS and JS as indicated in the example, but the icon is not inserted in the first column nor anything happens when I click on the column.
I would like to know if anyone has any more examples of modal used along with datatables to be able to pass me? My code is the following:

$(document).ready(function () {
$('#example').DataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
console.log(data);
console.log(data[0]);
console.log(data[1]);
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
}
}
});
});

Obs: I'm using the Vue JS framework and putting the script inside the setup function section.

kthorngren

but the icon is not inserted in the first column nor anything happens when I click on the column.

Its hard to say without seeing the problem but off the top of my head here are some things to look at - especially if the responsive icon doesn't show (meaning its not in responsive mode):

1. Could be that the container the table is in is large enough to show all the columns. Do all the columns show on the page?
2. You may need style="width: 100%;" on the table tag like this example.
3. You haven't properly loaded the responsive.js library. Make sure its loading. See if the debugger finds the library.
4. Look for errors in the browser's console.

Try recreating your table in a standard environment to eliminate any issues with Vue JS.

For help debugging please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

denisPF

Kevin,

I've double check the imports and I left only the ones you recommended but unfortunately the result is still not responsive when I click on the first column.

import { ref } from 'vue'
import { useRouter } from 'vue-router'
import "bootstrap/dist/css/bootstrap.min.css"
import "jquery/dist/jquery.min.js"
import "jszip/dist/jszip.js"
import "pdfmake/build/pdfmake.js"
import $ from 'jquery'
import SwsApplication from '@/sws.application.js'

//Datatable Modules

// CSS
import "datatables.net-responsive-dt/css/responsive.dataTables.min.css"
import "datatables.net-dt/css/jquery.dataTables.min.css"

// JS
import "datatables.net/js/jquery.dataTables.min.js"
import "datatables.net-responsive/js/dataTables.responsive.min.js"

Follow attached is a screen print with the table

I'm now out of ideas on how to solve this failure...

regards,
Adenilson

glimpsed_chaos

I asked a similar question earlier today.

It turns out I had a misunderstanding, assuming that the icon should be present so I could click and see a modal with additional data.

It appears that using responsive modal will only add the button and allow you to see the modal if the width of your browser is small enough. I tested with my codepen and found that yes, if I shrink my browser width it actually does work.

I would suggest trying that to see if it does appear for you.

kthorngren

All of your columns are showing so none are in responsive mode. Shrink the browser window. Responsive should kick in and hide columns when they can't be displayed within the browser container. Then you will see the plus and can click to see the modal.

Kevin

denisPF

Thanks, now I understand the purpose of this functionality.

I've tested and this behavior actually occurs.
But I would like something different. I have a list of n objects with 20 attributes each, but I wouldn't want to display the 20 attributes in columns of a table, as it gets too polluted. I would like to display only 5 attributes (5 columns), and when the user clicks on a detail icon (present in one of the columns), then the other 15 attributes remaining in a modal would be displayed. Note that this has nothing to do with the issue of resizing the browser, as I said earlier, my purpose is different.
Has anyone had this same problem? Does anyone have any clues on how to do this?

Adenilson

kthorngren

One option is Child Detail rows. Or if you want a modal you use a click event like this example to get the row data to display in a modal. The row data doesn't need to be displayed in the table to be accessible. You can see this in the child detail rows example - not all the data is displayed in the table but is used in the child rows.

Kevin

denisPF

Thanks again Kevin,

I managed to implement the example at https://datatables.net/examples/api/row_details.html as seen in the page below.

The functionality of clicking on the plus icon (open detail) works when I make a first query and click on the "consult" button on my form.

But when I keep the page open and make a new query, just changing some other search parameter in the form fields, and then I click on the "Consult" button, the functionality stops working. I tried to debug the code and I noticed that the first time I click in the details icon the data is present in row.data(), but when I resubmit another row.data() query it comes empty.

The error that appears in the console.log when I click on "Query" is as follows:

The fields in my form are in the following figure:

and below I show the code snippet I made to display the table:

            $(document).ready(async function () {
                let data = await SwsApplication.redeEstacoes(params.codestacao, params.codibge, params.uf, params.tipoestacao);

            
                var table =  $('#tb_dadosredeEstacoes').DataTable({
                        data: data,
                        language: {
                            emptyTable: data.Info,
                        },
                        destroy: true,
                        retrieve: false,
                        paging: true,
                        searching: true,
                        processing: true,
                        dom: 'Bfrtip',
                        buttons: ['copy', 'csv', 'pdf', 'excel', 'print'],
                        columns: [
                        {
                            className: 'dt-control',
                            orderable: false,
                            data: null,
                            defaultContent: '',
                        },
                        {
                            data: 'codestacao',
                            title: 'Código'                       
                        },
                        {
                            data: 'nome',
                            title: 'nome'
                        },
                        {
                            data: 'latitude',
                            title: 'latitude'
                        },
                        {
                            data: 'longitude',
                            title: 'longitude'
                        }
                        ]
                });

                table.columns.adjust().responsive.recalc();

                // Add event listener for opening and closing details
                $('#tb_dadosredeEstacoes tbody').on('click', 'td.dt-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    } else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });

            });

and the format function used in the code above is:

 /* Formatting function for row details */
        function format(d) {
            // `d` is the original data object for the row
            return (
                '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>' +
                '<td>Nome:</td>' +
                '<td>' +
                d.nome +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Latitude:</td>' +
                '<td>' +
                d.latitude +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Longitude:</td>' +
                '<td>' +
                d.longitude +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Cidade:</td>' +
                '<td>' +
                d.cidade +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>UF:</td>' +
                '<td>' +
                d.uf +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Tipo:</td>' +
                '<td>' +
                d.tipoestacao_descricao +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Altitude:</td>' +
                '<td>' +
                d.altitude +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Data Instalação:</td>' +
                '<td>' +
                d.data_instalacao +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Data Cadastro:</td>' +
                '<td>' +
                d.dh_cadastro +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Rede:</td>' +
                '<td>' +
                d.rede_sigla +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Offset:</td>' +
                '<td>' +
                d.offset +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Cota Alerta:</td>' +
                '<td>' +
                d.cota_alerta +
                '</td>' +
                '</tr>' +
                '<tr>' +
                '<td>Cota Atenção:</td>' +
                '<td>' +
                d.cota_atencao +
                '</td>' +
                '</tr>' +
                 '<tr>' +
                '<td>Cota Transbordamento:</td>' +
                '<td>' +
                d.cota_transbordamento +
                '</td>' +
                '</tr>' +
                '</table>'
            );
        }       

Could someone tell me what could be happening and how to solve this type of error ?
I think it must be some initialization error or something but I really don't know how I could solve it.

thankful,

Adenilson

kthorngren

The code you posted looks pretty standard. Without seeing the problem its hard to say where the error is.

but when I resubmit another row.data() query it comes empty.

How does this process work?

Can you post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

denisPF

I've solved the problem adding the following line in my code

 $('#tb_dadosredeEstacoes tbody').off('click', 'td.dt-control');

just before the click event

 // Add event listener for opening and closing details
    $('#tb_dadosredeEstacoes tbody').on('click', 'td.dt-control', function () {

Thanks in advance,

I hope this could help someone.

Adenilson

kthorngren

That seems odd unless you are calling a function that invokes the event handler more than once. Thanks for letting us know you found the soultion.

Kevin