Responsive modal display : adding a class (css) and/or changing the HTML default markup

MelodyNelson · July 2023

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I want to add a class to this render and the default H2 created for the header of the responsive modal display.
I've tried this but, it creates **H2 my returned content /H2* after the default H2

display: DataTable.Responsive.display.modal({
                header: function (row) {
                    var data = row.data();
                    return '<h2 class="txt-center MT">Projet ' + data['societe'] + '</h2><hr>'; // test
                }
            })

I know I can change the CSS but the best solution for me is to create all the HTML markup.
For example, not using H2.
Sometimes, I will need to have text and images in the header area of the modal display. If I could have control on everything and delete the default H2, it would be nice.

Thank you

kthorngren · July 2023

This example states this:

We use the options for this function to specify a header for the modal - if you do not wish to show a header, simply don't specify this option.

If you don't want the header the responsive adds then don't specify the header option. Use responsive.details.renderer to display both the header you desire along with the responsive data. Something like this:
https://live.datatables.net/xoroluje/1/edit

Kevin

MelodyNelson · July 2023

Thanks Kevin.

My problem is that I choose to use the Modal display to create a « fake details page » of my record and I didn't use the automatic renderer for the details infos because I need some adaptations, change the order, etc.

With my JS level, I'm confused with the usage of return, so I don't know how to create multiple returns (maybe the concept is 1 function = 1 return, so I need to create other function).

Here's my WIP modal details return code.
I'm still looking for how to add infos before and after my table inside the return.

For example :
- first a title like the one in the header option (including data infos)
- the table with most of the data
- after the table, a long text (from the data) and a images (from the data)

responsive: {
        orthogonal: 'responsive', // lire la doc sur cette option
        details: {
            display: DataTable.Responsive.display.modal({
                header: function (row) {
                    var style = 'txt-center txt-color-!4d=1;WEB_vt_interface;0!';
                    var data = row.data();
                    return '<h2 class="' + style + '">Projet ' + data['societe'] + '</h2><hr>';
                }
            }),
            renderer: function ( api, rowIdx, columns ) {           
                var data = table.row(rowIdx).data();
                console.log ( data );
                
                // écrire code pour l'image à associer à chaque Société (ou le mettre directement dans le dataSet ?)
                
                return $('<table/>')
                    .append('<tr><td>Projet pour</td><td>' + data.societe + '</td></tr>')
                    .append('<tr><td><strong>Code projet</strong></td><td><strong>' + data.code + '</strong></td></tr>')
                    .append('<tr><td>Chargé de projet</td><td>' + data.cdp + '</td></tr>')
                    .append('<tr><td>Date de création du projet</td><td><em>dateDebut (ajouter dans le dataSet)</em></td></tr>')
                    .append('<tr><td>Suivi administratif</td><td><em>Suivi par (ajouter dans le dataSet)</em></td></tr>')
                    .append('<tr class="h20"><td colspan="2"></td></tr>')
                    .append('<tr><td></td><td class="pb5"><span class="' + data.groupeClient.class + '">' + data.groupeClient.prefixe + data.groupeClient.groupe + '</span></td></tr>') 
                    .append('<tr><td><strong>Société</strong></td><td><strong>' + data.client.societe + '</strong></td></tr>')
                    .append('<tr><td>Contact client</td><td>' + data.client.prenom + ' ' + data.client.nom + '</td></tr>')              
                    .append('<tr><td>Description du projet</td><td>' + data.description.bobst + data.description.autre + '</td></tr>')
                    .append('<tr class="h20"><td colspan="2"></td></tr>')
                    .append('<tr><td><strong>Budget client</strong></td><td><strong>Montant 1 (ajouter dans le dataSet)</strong></td></tr>')
                    .append('<tr><td>Type de vente</td><td>' + data.typeVente + '</td></tr>')
                    .append('<tr><td>Pour le compte de</td><td>' + data.commettant + '</td></tr>')
                    .append('<tr><td>Matériel proposé</td><td>' + data.materiel + '</td></tr>')
                    .append('<tr><td class="valign-top">Détails de la configuration</td><td>' + data.description.configuration + '</td></tr>')
                    .append('<tr><td>Montant de l\'offre</td><td>' + DataTable.render.number(' ', null, 0, null, ' €').display(data.montantOffre) + '</td></tr>')
                    .append('<tr><td>Numéro d\'offre ' + data.commettant +'</td><td>' + data.numeroOffre + '</td></tr>')
                    .append('<tr><td class="pr20">Date de l\'offre ' + data.commettant +'</td><td>' + data.dateOffre.display + '</td></tr>')
                    .append('<tr><td class="valign-top">Concurrents</td><td>' + data.concurrents + '</td></tr>')
                    .append('<tr><td>Avancement</td><td><span class="' + data.avancement.class + '"></span></td></tr>')
                    .append('<tr><td>Réalisation</td><td>' + DataTable.render.number(' ', null, 0, null , ' %').display(data.realisation) + '</td></tr>')
                    .append('<tr><td>Réussite</td><td>' + DataTable.render.number(' ', null, 0, null , ' %').display(data.reussite) + '</td></tr>')
                    .append('<tr><td colspan="2" class="h20"><hr></td></tr>')
                    .append('<tr><td colspan="2" class="h20"><strong>Statut du projet</strong></td></tr>')
                    .append('<tr><td colspan="2">' + data.commentaire + '</td></tr>') ;                 
            }
        }       
    }

allan · July 2023

Can you include the before and after in the return from the rendering function. For example.

Regarding the multiple returns - do you mean the return inside the map function that Kevin used? That's inside another (anonymous) function, which is how that is allowed to work (apologies if that is already clear).

Allan

MelodyNelson · July 2023

Wow, you just changed my life Allan !
Thank you for the example

I was talking about return in general.
Strangely, the example with the map function was clear for me.

I'm reading a lot on this website and on W3C school (or results from search on the web) but I did't find the perfect doc to learn JS / jQuery
W3C School is nice, but i wish, they had more complex examples.

allan · July 2023

In general, you can have as many return statements as you want in a function. Its just that the first one that the browser hits in the execution will be the one that is actually used. So:

function test () {
  return 1;
  return 2;
  return 3;
}

is valid Javascript, just redundant - that function will only ever return 1. Multiple returns really come into their own when combined with flow control logic - i.e. if etc.

I like the Khan Academy stuff for learning. Still plenty to learn for me as well!

Allan

MelodyNelson · July 2023

Thanks Allan for the explanations and the Khan Academy website, looks like a good source of knowledges.
Sometimes, I think I'm missing things because english is not my first language and I didn't really learn english

Responsive modal display : adding a class (css) and/or changing the HTML default markup

Responsive modal display : adding a class (css) and/or changing the HTML default markup

Answers

Howdy, Stranger!

Categories

DataTables

Responsive modal display : adding a class (css) and/or changing the HTML default markup

Responsive modal display : adding a class (css) and/or changing the HTML default markup

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables