Check for Data Table

Question

I’m using Data Table to make a table of domains/ subdominios and some accesses, as my table is a little large I had to use Child Rows, my concern and do the validation, I want to validate, as shown in the image, if you have entered the BD pass and the email of the back ofice shows the line with the information, if the fields are empty, shows nothing.

<script type="text/javascript">
function format ( d ) {
        // `d` is the original data object for the row
        return '<table class="new" cellpadding="5" cellspacing="0" border="0" style="background:white; float:left; border-collapse: separate; border-spacing: 0 8px; margin-top: -8px;border:none; margin-left:30px;">'+
            '<tr style="background:white">'+
                '<td style="border:none"><b>Email Back Office: &nbsp;</b></td>'+
                '<td style="border:none"> <input style="border: none; outline:none" readonly name="mail" id="mail" value="'+d.email+'"> <button style="background: aliceblue; border: 1px solid cadetblue;" title="Copiar Email" onclick="myFunction()"><i class="fas fa-copy"></i></button></td>'+
            '</tr>'+
            '<tr style="background:white">'+
                '<td style="border:none"><b> Password Back Office: &nbsp; </b> </td>'+
                '<td style="border:none"> <input style="border: none; outline:none" readonly name="pw" id="pw" value="'+d.pass+'"> <button style="background: aliceblue; border: 1px solid cadetblue;" title="Copiar Password" onclick="myFunctionPass()"><i class="fas fa-copy"></i></button></td>'+
            '</tr>'+
            '</table>' 
        ;
    }


$(document).ready( function () {
   var users =  $('#myTable').DataTable( {
            "columns": [
                { "data": "" },
                { "data": "dominio" },
                { "data": "subdominio" },
                { "data": "certificado" },
                { "data": "registo" },
                { "data": "data" },
                { "data": "qtd" },
                { "data": "preco"} ,
                { "data": "comentarios" },
                { "data": "email" },
                { "data": "pass" },
                { "data": "opcoes" },
    ],
    "order": [[1, 'asc']],
    responsive: true,
    "lengthMenu": [[14, 50, 100, -1], [14, 50, 100, "Todos"]],
    "language": {
        "sEmptyTable": "Nenhum registro encontrado",
        "sInfo": "_START_ / _END_ de _TOTAL_ registros",
        "sInfoEmpty": " 0 / 0 de 0 registros",
        "sInfoFiltered": "(Filtrados de _MAX_ registros)",
        "sInfoPostFix": "",
        "sInfoThousands": ".",
        "sLengthMenu": "Mostrar _MENU_ registos por página",
        "sLoadingRecords": "Carregar...",
        "sProcessing": "Processar...",
        "sZeroRecords": "Nenhum registro encontrado!",
        "sSearch": "",
        "searchPlaceholder": "Pesquisar...",
        "oPaginate": {
            "sNext": "Próximo",
            "sPrevious": "Anterior",
            "sFirst": "Primeiro",    
            "sLast": "Último"
        },
    }
});

$('#search').keyup(function() {
    users.search($(this).val()).draw();
})

$('#myTable tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = users.row( tr );

    if ( row.child.isShown() ) {
        row.child.hide();
        tr.removeClass('shown');
    }else {
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
});

});

And I do not know how I will do the validation for this to happen, all table fields are stored in the database.

Answer 1

Solved!

<script type="text/javascript">
function format ( d ) {
        // `d` is the original data object for the row
        if(d.email != ""){
            return '<table class="new" cellpadding="5" cellspacing="0" border="0" style="background:white; float:left; border-collapse: separate; border-spacing: 0 8px; margin-top: -8px;border:none; margin-left:30px;">'+
                '<tr style="background:white">'+
                    '<td style="border:none"><b>Email Back Office: &nbsp;</b></td>'+
                    '<td style="border:none"> <input style="border: none; outline:none" readonly name="mail" id="mail" value="'+d.email+'"> <button style="background: aliceblue; border: 1px solid cadetblue;" title="Copiar Email" onclick="myFunction()"><i class="fas fa-copy"></i></button></td>'+
                '</tr>'+
                '<tr style="background:white">'+
                    '<td style="border:none"><b> Password Back Office: &nbsp; </b> </td>'+
                    '<td style="border:none"> <input style="border: none; outline:none" readonly name="pw" id="pw" value="'+d.pass+'"> <button style="background: aliceblue; border: 1px solid cadetblue;" title="Copiar Password" onclick="myFunctionPass()"><i class="fas fa-copy"></i></button></td>'+
                '</tr>'+
                '</table>' 
            ;
        }else {
            return '<p style="font-size: 13px; margin: 0 20px 0px;"> <b> Não Existem Dados Adicionais! </b> </p>'
        }       
    }

I thus performed the validation, through the input parameter