Show image in datatable instead of name

Pliachas Paschalis · January 2016

Even i read a lot of similar questions i still having problem of showing image in a datatable cell instead of it's name which is uploaded to server.
my code is:
server side:

include( "../../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'Agent' )
    ->fields(
        Field::inst( 'Agent.First_name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'Agent.Last_Name' )->validator( 'Validate::notEmpty' ),
        Field::inst( 'Agent.Middle_Name' ),     
        Field::inst( 'Agent.Phone' ),
        Field::inst( 'Agent.FAX' ),
        Field::inst( 'Agent.Email' ),
        Field::inst( 'Agent.Website' ),
        Field::inst( 'Agent.Facebook' ),
        Field::inst( 'Agent.Tweeter' ),
        Field::inst( 'Agent.LinkedIn' ),
        Field::inst( 'Agent.Photo' )->upload(
        Upload::inst( '/home/sites/pliachaspaschalis.com/public_html/BillSite/uploads/__NAME__' )        
            ->db( 'image', 'image.id', array(                
                    'image.fileName'    => Upload::DB_FILE_NAME,
                    'image.fileSize'    => Upload::DB_FILE_SIZE
            ) ) ),
        Field::inst( 'Agent.Logo' ),
        Field::inst( 'Agent.pIcons' ),
        Field::inst( 'Agent.Licensing_Info' ),
        Field::inst( 'Agent.Notes' ),
        Field::inst( 'image.fileName' ),
        Field::inst( 'image.id' )
        
    )
    ->leftJoin( 'image','Agent.Photo' , '=', 'image.id' )
    ->process( $_POST )
    ->json();

and on client side:

var editor; // use a global for the submit and return data rendering in the examples
    $(document).ready(function () {
                editor = new $.fn.dataTable.Editor( {
                    ajax: "../php/agent.php",
                        table: "#dataTables-example",
                        fields: [
                            { label: "First Name:", name: "Agent.First_name" },
                            { label: "Last Name:", name: "Agent.Last_Name" },
                            { label: "Middle Name:", name: "Agent.Middle_Name" },                          
                            { label: "Phone:",   name: "Agent.Phone" },
                            { label: "FAX:",  name: "Agent.FAX" },
                            { label: "Email:",  name: "Agent.Email" },
                            { label: "Web Site:",   name: "Agent.Website" },
                            { label: "Facebook:",   name: "Agent.Facebook" },
                            { label: "Tweeter:",   name: "Agent.Tweeter" },
                            { label: "LinkedIn:",   name: "Agent.LinkedIn" },
                            { label: "Photo:",   name: "Agent.Photo", type: "upload" ,
                                    display: function ( id ) {
                return '<img src="'+table.file( 'image', id ).fileName+'"/>';
            },
            noImageText: 'No image'},
                            { label: "Logo:",   name: "Agent.Logo" },
                            { label: "pIcons:",   name: "Agent.pIcons" },
                            { label: "Licensing_Info:",   name: "Agent.Licensing_Info" },
                            { label: "Notes:",   name: "Agent.Notes" }
                        ]
                    } );
                    // Activate an inline edit on click of a table cell
                    $('#dataTables-example').on( 'click', 'tbody td:not(:first-child)', function (e) {
                        editor.inline( this );
                    } );
                $('#dataTables-example').DataTable({
                        dom: "Bfrtip",
                        ajax: "../php/agent.php",   
                            columns: [
                                {
                                    data: null,
                                    defaultContent: '',
                                    className: 'select-checkbox',
                                    orderable: false
                                },
                                { data: "Agent.First_name" },
                                { data: "Agent.Last_Name" },
                                { data: "Agent.Middle_Name" },
                                { data: "Agent.Phone" },
                                { data: "Agent.FAX" },                              
                                { data: "Agent.Email" },
                                { data: "Agent.Website" },
                                { data: "Agent.Facebook" },
                                { data: "Agent.Tweeter" },
                                { data: "Agent.LinkedIn" },
                                { data: "image.fileName" },
                                { data: "Agent.Logo" },
                                { data: "Agent.pIcons" },
                                { data: "Agent.Licensing_Info" },
                                { data: "Agent.Notes" }
                            ],                  
                            select: {
                                style:    'os',
                                selector: 'td:first-child'
                            },
                     select: true,
                     buttons: [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "remove", editor: editor }
                        ]
                    });             
                    
            });

when i click on a row i got this: "ReferenceError: table is not defined"
What am i doing wrong? Thanks in advance

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Pliachas Paschalis · January 2016

I tried on my server the 'examples/advanced/upload.html' from examples for DataTable editor but i get an error that the image i uploaded:
"/uploads/27.png was not found on this server"
What is that. if i go the uploads folder i can see the png file

Pliachas Paschalis · January 2016

TypeError: table.file(...) is undefined
'<img src="'+table.file( 'image', file_id ).web_path+'"/>' :

Pliachas Paschalis · January 2016

DataTables debug bookmarklet is processing and processing
it doesn't seem to finish!

allan · January 2016

ReferenceError: table is not defined

Looking at the code, there is no variable called table, so I think the error message is quite correct.

Try assigning the DataTable to the table variable:

var table = $('#dataTables-example').DataTable({

Allan

Pliachas Paschalis · January 2016

Thanks Allan for your reply. Please this link:
http://176.32.230.42/pliachaspaschalis.com/DataTablesE/examples/advanced/upload.html
I can't see the images. The code is the following:

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/upload.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "First_name"
            }, {
                label: "Last name:",
                name: "Last_name"
            }, {
                label: "Phone #:",
                name: "Phone"
            }, {
                label: "Website:",
                name: "Website"
            }, {
                label: "Image:",
                name: "Photo",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+table.file( 'image', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ]
    } );

    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/upload.php",
        columns: [
            { data: "First_name" },
            { data: "Last_Name" },
            { data: "Phone" },
            { data: "Website" },
            {
                data: "Photo",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+table.file( 'image', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

Pliachas Paschalis · January 2016

I tried to edit a record and when i tried to update form stacked. On debugger i recieved this: i get this on debugger: TypeError: f[(q7G + l1Q.Q8)][a]
When i reloaded the page i got again the same error: TypeError: table.file(...) is undefined on this part of code:

'<img src="'+table.file( 'image', file_id ).web_path+'"/>' :

Any idea?

allan · January 2016

The server it returning the following when loading the page for the table data:

{
    "data": [{
        "DT_RowId": "row_1",
        "First_name": "Bill",
        "Last_Name": "Geronimakis",
        "Phone": "23525252",
        "Website": "shttr",
        "Photo": "0"
    }],
    "options": [],
    "files": {
        "image": []
    }
}

Note that there is no information in the image array, but the Photo column refers to index 0.

Does the database have anything in the image table?

Allan

Pliachas Paschalis · January 2016

After asking the question i deleted all records from image table and left only one record in Agent table. I'll try to delete it also and do the process from the start

Pliachas Paschalis · January 2016

Ok I deleted them all. So i inserted a new record, i see it on the datatable but i don't see the attached image.

allan · January 2016

http://176.32.230.42/home/sites/pliachaspaschalis.com/public_html/BillSite/uploads/1.jpg
Failed to load resource: the server responded with a status of 404 (Not Found)

Which is the error.

However, you are using web_path in the parameters to show the image, but I don't see it anywhere in your database configuration in the above code. Have you changed the PHP since then?

Pliachas Paschalis · January 2016

in my uploads folder there are all the images i uploaded since i started trying to making test with Datatables. My php file is the following:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// 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\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'Agent' )
    ->fields(
        Field::inst( 'First_name' ),
        Field::inst( 'Last_Name' ),
        Field::inst( 'Phone' ),
        Field::inst( 'Website' ),
        Field::inst( 'Photo' )
            ->setFormatter( 'Format::ifEmpty', null )
            ->upload( Upload::inst( '/home/sites/pliachaspaschalis.com/public_html/BillSite/uploads/__ID__.__EXTN__' )
                ->db( 'image', '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', 'gif' ], "Please upload an image" )
            )
    )
    ->process( $_POST )
    ->json();

i can send you a print screen of my uploads folder to see the images

Pliachas Paschalis · January 2016

Should it be a permissions matter on the folder or in the image files?

Pliachas Paschalis · January 2016

Well Allan reading carefully the instructions here: http://datatables.net/reference/api/file() i changed the code and instead of using 'file_id' i had to look for 'id' field of my table. Also i changed the folder where images have been saved from that:

Upload::inst( '/home/sites/pliachaspaschalis.com/public_html/BillSite/uploads/__ID__.__EXTN__' )

to that

Upload::inst('../../uploads/__ID__.__EXTN__' )

and i can see now the images.
Thanks for help

allan · January 2016

Fantastic - good to hear you've got it working now.

Allan

Pliachas Paschalis · January 2016

if you allow please let me make a proposal. As i see all code is in Examples. It would be better if there was the database structure for the table we use in Datatables.
Thanks anyway

Show image in datatable instead of name

Show image in datatable instead of name

Answers

Howdy, Stranger!

Categories

DataTables

Show image in datatable instead of name

Show image in datatable instead of name

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables