DataTables hidden row details example problems help please

fernarey18

I need to do this, but otherwise. Because it does not work?

https://datatables.net/examples/server_side/row_details.html

Table HTML

<table class="table datatable-basic table-striped table-hover" width="100%" cellspacing="0">
                       <thead>
                           <tr>
                               <th style="width: 20%; text-align: left;">Nombre</th>
                               <th style="width: 12%; text-align: left;">DNI</th>
                               <th style="width: 15%; text-align: left;">Ciudad</th> 
                               <th style="width: 18%; text-align: left;">Dirección</th>
                               <th style="width: 10%; text-align: left;">Teléfono</th>                               
                               <th style="width: 14%; text-align: left;">Nº de afiliado</th>
                               <th></th>
                               <th class="text-center" style="width: 10%; text-align: center; border-right: 1px solid #bbb;">Acción</th>                           
                           </tr>
                       </thead>
                   </table>

Code JS

function fnFormatDetails (oTable, nTr) {
        var aData = oTable.fnGetData(nTr);
        var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
        sOut += '<tr><td><b>Fecha de nacimiento:</b></td><td>sdafasdfasd</td></tr>'; // '+aData[6]+'                        
        sOut += '</table>';
        return sOut;
}

$('.datatable-basic').DataTable({                                                                                                               
        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
        "oLanguage": {
              "sLengthMenu": "Mostrar _MENU_",
              "sSearch": "Buscar:",
              "sInfo": "Mostrando _START_ a _END_ de _TOTAL_ clientes",
              "sZeroRecords": "No hay clientes coincidentes encontrados",
              "sInfoFiltered": "(filtrado entre _MAX_ clientes)",
              "sInfoEmpty": "Mostrando 0 a 0 de 0 clientes",
              "oPaginate" : {
                  "sFirst" : "Primero",
                  "sLast" : "Ultimo",
                  "sNext" : "Siguiente",
                  "sPrevious" : "Anterior"  
              }                      
          },
          "aaSorting": [[ 0, "asc" ]],
          "aoColumns": [              
              { "bSortable": true },
              { "bSortable": false },
              { "bSortable": false },                                           
              { "bSortable": false },
              { "bSortable": false },                                           
              { "bSortable" : false },
              { "bVisible" : false },         
              { "bSortable" : false }             
          ],
         "bProcessing": true,
         "serverSide": true,
         "ajax":{
            url :"server_processing_cl.php", 
            type: "post",  
            error: function(){
              $("#employee_grid_processing").css("display","none");
            }
          }
          
        });
        
        $('.datatable-basic tbody td img#mostrar').on('click', function () {
          var nTr = $(this).parents('tr')[0];
              if ( oTable.fnIsOpen(nTr) ) {
                  
                  this.src = "img/details_open.png";
                  oTable.fnClose( nTr );
              }else {
                  
                  this.src = "img/details_close.png";
                  oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
              }
          } ); 
    
});

Server Side PHP
```
<?php

include_once("st_inc/connection.php");   

$params = $columns = $totalRecords = $data = array();

$params = $_REQUEST;

$columns = array(       
    0 =>'nombre', 
    1 => 'dni',
    2 => 'ciudad',
    3 => 'direccion',
    4 => 'telefono',            
    5 => 'afiliado' 
);

$where = $sqlTot = $sqlRec = "";

if( !empty($params['search']['value']) ) {   
    $where .=" WHERE ";
    $where .=" ( nombre LIKE '%".$params['search']['value']."%' ";    
    $where .=" OR dni LIKE '%".$params['search']['value']."%' ";
    $where .=" OR ciudad LIKE '%".$params['search']['value']."%' ";
    $where .=" OR direccion LIKE '%".$params['search']['value']."%' ";
    $where .=" OR telefono LIKE '%".$params['search']['value']."%' ";
    $where .=" OR afiliado LIKE '%".$params['search']['value']."%' )";      
}

$sql = "SELECT nombre, dni, ciudad, direccion, telefono, celular, afiliado FROM clientes ";
$sqlTot .= $sql;
$sqlRec .= $sql;

if(isset($where) && $where != '') {
    $sqlTot .= $where;
    $sqlRec .= $where;
}


$sqlRec .=  " ORDER BY ". $columns[$params['order'][0]['column']]."   ".$params['order'][0]['dir']."  LIMIT ".$params['start']." ,".$params['length']." ";

$queryTot = mysqli_query($connection, $sqlTot) or die("database error:". mysqli_error($connection));


$totalRecords = mysqli_num_rows($queryTot);

$queryRecords = mysqli_query($connection, $sqlRec) or die("error to fetch employees data");

while( $row = mysqli_fetch_row($queryRecords) ) {
    $row[5] = $row[6];      
    $row[7] = '<img id="mostrar" src="img/details_open.png" title="ver información"><img src="img/edit.png">';      
    $data[] =  $row;


}   

$json_data = array(
        "draw"            => intval( $params['draw'] ),   
        "recordsTotal"    => intval( $totalRecords ),  
        "recordsFiltered" => intval($totalRecords),
        "data"            => $data   
        );

echo json_encode($json_data);  

<?php > ``` ?>

tangerine

What do you mean by " it does not work" ?
What happens? Are you seeing errors?
The example works.

fernarey18

Excuse me I do not speak English I'm from Argentina I translate with google chrome
I need to do this (view image). when I click + does not show the hidden data