How to display multiple images from database in table?

jhonny14

Ok, so the upload of files is working, but when i want to display the images in table it doesn t work, i used the code provided from files() example - https://datatables.net/reference/api/files%28%29

Where it should be the filename of the images it shows undefined.

Any help is apreciated.

Javascript code

<script>
var editor; // use a global for the submit and return data rendering in the examples

$( document ).ready(function() {
        
editor = new $.fn.dataTable.Editor( {
<?php include 'Romanian.php'; ?>
ajax: "ajax/concesiune.php",
table: "#concesiune",
fields: [ 
{label: "Loc:", name: "concesiune.idunic",  type: "autoComplete", opts: {source: [], 
        response: function(event, ui) {
        if (!ui.content.length) {
        $("#message1").html('<div style="float:right;"><button type="button" class="btn btn-danger">Nu exista! </button><a href="loc.php?loc=loc" type="button" class="btn btn-success" target="_blank">Adauga loc!</a></div>');
        } else {
        $("#message1").empty();
        }
        }
    }},
{label: "Concesionar CNP:", name: "concesiune.concesionar",  type: "autoComplete", opts: {
        source: [], 
        response: function(event, ui) {
        if (!ui.content.length) {
        $("#message").html('<div style="float:right;"><button type="button" class="btn btn-danger">Nu exista! </button><a href="concesionar.php?link=cnp" type="button" class="btn btn-success" target="_blank">Creaza concesionarul!</a></div>');
        } else {
        $("#message").empty();
        }
        }
    }},
{label: "Nr. Concesiune:", name: "concesiune.nrconcesiune"},
{label: "Data:", name: "concesiune.datax", type: 'datetime', def: function () { return new Date(); }, format: 'DD/MM/YYYY'},
{label: "Concesiune:", name: "concesiune.valabilitate", type: "select"},
{label: "Suma totala:", name: "concesiune.stotal", type: "readonly" },
{label: "Suma achitata:", name: "concesiune.sachitat"},
{label: "Rest plata:", name: "concesiune.restplata", type: "readonly" },
{label: "Nr. Chitanta:", name: "concesiune.nrchitanta"},
{label: "Observatii:", name: "concesiune.observatii", type: "textarea"}, 
{
                label: "Imagini:",
                name: "files[].id",
                type: "uploadMany",
                display: function ( fileId, counter ) {
                    return '<img src="'+table.file( 'files', fileId ).web_path+'"/>';
                },
                noImageText: 'Selecteaza imagini'
            }
]
} );

var table = $('#concesiune').DataTable( {
dom: "lfBrtip",
language: {
url: 'Romanian.json'
},
ajax: {
            url: "ajax/concesiune.php",
            type: "POST"
        },
        processing: true,
        serverSide: true,
        
columns: [
{ data: "concesiune.idunic" },
{ data: "a.nume" },
{ data: "concesiune.adaugat" },
{ data: "concesiune.nrconcesiune" },
{ data: "concesiune.datax" },
{ data: "concesiune.valabilitate"},
{ data: "concesiune.stotal"},
{ data: "concesiune.sachitat"},
{ data: "concesiune.restplata"},
{ data: "concesiune.nrchitanta"},
{ data: "concesiune.observatii"},
 {
                data: "files",
                render: function ( fileId ) {
                    return fileId ?
                        '<img src="'+table.file( 'files', fileId ).web_path+'"/>' :
                        'No image';
                }
}
        ],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit",   editor: editor },
{ extend: "remove", editor: editor },
{ extend: 'collection', text: 'Exporta', buttons: ['copy', 'excel', 'csv', 'pdf', 'print']}
],

} );


editor.on( 'submitComplete', function () {
    Cookies.remove('cookiecnp');
    Cookies.remove('cookieloc');
});


editor.on( 'open', function ( e, mode, action ) {
$(editor.field('concesiune.idunic').node()).append('<div id="message1"></div>');
$(editor.field('concesiune.concesionar').node()).append('<div id="message"></div>');
    
$( 'select', editor.field( 'concesiune.valabilitate' ).node() ).on( 'change', function () {
try{
var splits = (this.value.split("-")[2]).substr(0, 5);
}catch (e){};
editor.field( 'concesiune.stotal' ).set( splits );
} );

$( 'input', editor.field( 'concesiune.sachitat' ).node() ).on( 'change', function () {
var totr = editor.val( 'concesiune.stotal' );
editor.field( 'concesiune.restplata' ).set( totr - this.value );
} );
});

jQuery(window).bind("focus",function(event){
   editor.field( 'concesiune.idunic' ).set( Cookies.get('cookieloc') );
   editor.field( 'concesiune.concesionar' ).set( Cookies.get('cookiecnp') );
$("#message").empty();
$("#message1").empty();
    })


});
</script>

Ajax response

{"data":[{"DT_RowId":"row_38","concesiune":{"idunic":"02-A-01-12","concesionar":"1880914226790","nrconcesiune":"23","datax":"29\/01\/2016","valabilitate":"25 Ani - Zona B - 612 lei","nrchitanta":"22432","stotal":" 612 ","sachitat":"22","restplata":"590","observatii":"gdfgdfgdf","adaugat":"2016-01-29 12:36:27"},"a":{"nume":"Maria"},"files":[{"id":"1"},{"id":"2"}]},{"DT_RowId":"row_39","concesiune":{"idunic":"02-A-02-12","concesionar":"1880914226790","nrconcesiune":"21","datax":"29\/01\/2016","valabilitate":"7 Ani - Zona B - 228 lei","nrchitanta":"32","stotal":" 228 ","sachitat":"22","restplata":"206","observatii":"ewqewq","adaugat":"2016-01-29 15:11:58"},"a":{"nume":"Maria"},"files":[]}],"options":{"concesiune.idunic":[{"label":"02-A-01-01","value":"02-A-01-01"},{"label":"02-A-01-02","value":"02-A-01-02"},{"label":"02-A-01-03","value":"02-A-01-03"},{"label":"02-A-01-04","value":"02-A-01-04"},{"label":"02-A-01-05","value":"02-A-01-05"},{"label":"02-A-01-06","value":"02-A-01-06"},{"label":"02-A-01-07","value":"02-A-01-07"},{"label":"02-A-01-08","value":"02-A-01-08"},{"label":"02-A-01-09","value":"02-A-01-09"},{"label":"02-A-01-10","value":"02-A-01-10"},{"label":"02-A-01-11","value":"02-A-01-11"},{"label":"02-A-01-12","value":"02-A-01-12"},{"label":"02-A-01-13","value":"02-A-01-13"},{"label":"02-A-01-14","value":"02-A-01-14"},{"label":"02-A-01-15","value":"02-A-01-15"},{"label":"02-A-01-16","value":"02-A-01-16"},{"label":"02-A-01-17","value":"02-A-01-17"},{"label":"02-A-08-12","value":"02-A-08-12"},{"label":"02-A-08-13","value":"02-A-08-13"},{"label":"02-A-08-14","value":"02-A-08-14"},{"label":"02-A-08-15","value":"02-A-08-15"},{"label":"02-A-08-16","value":"02-A-08-16"},{"label":"02-A-08-17","value":"02-A-08-17"},{"label":"02-A-08-18","value":"02-A-08-18"}],"concesiune.concesionar":[{"label":"1880914226790","value":"1880914226790"}],"concesiune.valabilitate":[{"value":"","label":"Alege valabilitatea"},{"value":" Ani - Zona - lei","label":" Ani - Zona - lei"},{"value":"7 Ani - Zona A - 456 lei","label":"7 Ani - Zona A - 456 lei"},{"value":"7 Ani - Zona B - 228 lei","label":"7 Ani - Zona B - 228 lei"},{"value":"25 Ani - Zona A - 1220 lei","label":"25 Ani - Zona A - 1220 lei"},{"value":"25 Ani - Zona B - 612 lei","label":"25 Ani - Zona B - 612 lei"},{"value":"49 Ani - Zona A - 2444 lei","label":"49 Ani - Zona A - 2444 lei"},{"value":"49 Ani - Zona B - 1220 lei","label":"49 Ani - Zona B - 1220 lei"}]},"files":{"files":{"1":{"id":"1","filename":"gb screenshot-us-mg5 mail yahoo com 2015-12-21 12-22-33.png","filesize":"40619","web_path":"\/administrare\/app\/upload\/1.png","system_path":"\/home\/***\/public_html\/administrare\/app\/upload\/1.png"},"2":{"id":"2","filename":"1-1.jpg","filesize":"27458","web_path":"\/administrare\/app\/upload\/2.jpg","system_path":"\/home\/***\/public_html\/administrare\/app\/upload\/2.jpg"}}},"draw":1,"recordsTotal":"2","recordsFiltered":"2"}

jhonny14

The database structure of images is he same as this example: https://editor.datatables.net/examples/advanced/upload-many.html

Any help is apreciated.

Ajax code:

<?php
 
// DataTables PHP library
include( "../php/DataTables.php" );
 
// Alias Editor classes so they are easy to use
use
   DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;
 
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'concesiune' )
    ->fields(
        Field::inst( 'concesiune.idunic' ) ->options( 'loc', 'idunic', 'idunic' ) ->validator( 'Validate::notEmpty' ),
        Field::inst( 'concesiune.concesionar' ) ->options( 'concesionar', 'cnp', 'cnp' ) -> validator( 'Validate::notEmpty' ),
        Field::inst( 'concesiune.nrconcesiune' ) -> validator( 'Validate::notEmpty' ) ->validator( 'Validate::numeric' ),
        Field::inst( 'concesiune.datax' ) ->validator( 'Validate::dateFormat', 'd/m/Y' )  
                                    ->getFormatter( 'Format::date_sql_to_format', 'd/m/Y' )  
                                    ->setFormatter( 'Format::date_format_to_sql', 'd/m/Y' ),
        Field::inst( 'concesiune.valabilitate' ) 
        ->options( function () use ( $db ) {
            $attrList = $db->selectDistinct (
                    'tarife',
                    ['tconcesiune', 'zconcesiune', 'pconcesiune']);
                   $out[] = array('value' => '', 'label' => 'Alege valabilitatea');
            while ( $row = $attrList->fetch() ) {
         
                $out[] = array(
                        "value" => $row['tconcesiune'].' Ani - Zona '.$row['zconcesiune'].' - '. $row['pconcesiune'] .' lei',
                        "label" => $row['tconcesiune'].' Ani - Zona '.$row['zconcesiune'].' - '. $row['pconcesiune'] .' lei'
                ); }      
            return $out;
            })
        -> validator( 'Validate::notEmpty' ),
        Field::inst( 'concesiune.nrchitanta' ) -> validator( 'Validate::notEmpty' ) ->validator( 'Validate::numeric' ),
        Field::inst( 'concesiune.stotal' ) ,
        Field::inst( 'concesiune.sachitat' ) -> validator( 'Validate::notEmpty' ) ->validator( 'Validate::numeric' ),
        Field::inst( 'concesiune.restplata' ) -> validator( 'Validate::notEmpty' ) ->validator( 'Validate::numeric' ),
        Field::inst( 'concesiune.observatii' ) -> validator( 'Validate::notEmpty' ),
        Field::inst( 'concesiune.adaugat' ) ,
        Field::inst( 'a.nume' ) -> validator( 'Validate::notEmpty' )
        ) ->join(
        Mjoin::inst( 'files' )
            ->link( 'concesiune.id', 'users_files.user_id' )
            ->link( 'files.id', 'users_files.file_id' )
            ->fields(
                Field::inst( 'id' )
                    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/administrare/app/upload/__ID__.__EXTN__' )
                        ->db( 'files', 'id', array(
                            'filename'    => Upload::DB_FILE_NAME,
                            'filesize'    => Upload::DB_FILE_SIZE,
                            'web_path'    => Upload::DB_WEB_PATH,
                            'system_path' => Upload::DB_SYSTEM_PATH
                        ) )
                        ->validator( function ( $file ) {
                            return$file['size'] >= 50000 ?
                                "Files must be smaller than 50K" :
                                null;
                        } )
                        ->allowedExtensions( [ 'png', 'jpg' ], "Please upload an image" )
                    )
            )
    )
    ->leftJoin( 'concesionar as a', 'a.cnp', '=', 'concesiune.concesionar')
    ->where( $key = 'concesiune.concesionar', $value = '', $op = '!=' )
    ->process( $_POST )
    ->json();