href into a colums

mimi123456789

Hello,

I've tested "upload" example.

I would like to know if it's possible in table not to see the image, but a link to open the file. Ha ve vou ever tested it ?

Thanks a lot !

mimi123456789

After some researches :
I found this :

I've tried to adapt it for a simple upload :

            {
                data: "o_control.controle_file",
                render: function ( file_id ) {
                    return file_id ?
                        html= '<a href="'+usersEditor.file( 'files',files_id).web_path+'" class="example"><img src="'+editor.file( 'files', file_id ).web_path+'"/ width="32" height="32"></a>':
                        return html;
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }

but I don't find my mistake... Have you an idea ?

I remember the goal : To have an icon with the link to the file insteed of the image.

Thanks for your help !

kthorngren

What happens? What do you see? Do you get errors?

Please post a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mimi123456789

Here is when it works like in the example :
--> workin version

What I would like is not showing the picture but only have the link to it like this :

Here is my complete js (working version)

/*
 * Editor client script for DB table o_control
 * Created by http://editor.datatables.net/generator
 */

// Display an Editor form that allows the user to pick the CSV data to apply to each column
function selectColumns ( editor, csv, header ) {
    var selectEditor = new $.fn.dataTable.Editor();
    var fields = editor.order();
 
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = editor.field( fields[i] );
 
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }
 
    selectEditor.create({
        title: 'Map CSV fields',
        buttons: 'Import '+csv.length+' records',
        message: 'Select the CSV column you want to use the data from for each field.'
    });
 
    selectEditor.on('submitComplete', function (e, json, data, action) {
        // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
        editor.create( csv.length, {
            title: 'Confirm import',
            buttons: 'Submit',
            message: 'Click the <i>Submit</i> button to confirm the import of '+csv.length+' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
        } );
 
        for ( var i=0 ; i<fields.length ; i++ ) {
            var field = editor.field( fields[i] );
            var mapped = data[ field.name() ];
 
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
    } );
}

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.o_control.php',
        table: '#o_control',
        fields: [
            {
                "label": "Date :",
                "name": "o_control.date_control",
                "type": "datetime",
                "format": "DD\/MM\/YY"
            },
            {
                "label": "Type :",
                "name": "o_control.o_type_control",
                "type": "select"
            },
            {
                "label": "Réalisé par :",
                "name": "o_control.o_acteur_control",
                "type": "select"
            },
            {
                "label": "Echéance :",
                "name": "o_control.echeance",
                "type": "datetime",
                "format": "DD\/MM\/YY"
            },
            {
                "label": "Référence:",
                "name": "o_control.ref_control"
            },
            {
                "label": "Action :",
                "name": "o_control.action",
                "type": "radio",
                "options": [
                "A faire",
                "En cours",
                "Cloturé"]
            },
            {
                label: "Image:",
                name: "o_control.controle_file",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ],
        i18n: {
            create: {
                button: "Nouveau",
                title:  "Créer nouvelle entrée",
                submit: "Créer"
            },
            edit: {
                button: "Modifier",
                title:  "Modifier entrée",
                submit: "Actualiser"
            },
            remove: {
                button: "Supprimer",
                title:  "Supprimer",
                submit: "Supprimer",
                confirm: {
                    _: "Etes-vous sûr de vouloir supprimer %d lignes?",
                    1: "Etes-vous sûr de vouloir supprimer 1 ligne?"
                }
            },
            error: {
                system: "Une erreur s’est produite, contacter l’administrateur système"
            },
            datetime: {
                previous: 'Précédent',
                next:     'Premier',
                months:   [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
                weekdays: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ]
            }
        }
    } );
    
    // Upload Editor - triggered from the import button. Used only for uploading a file to the browser
    var uploadEditor = new $.fn.dataTable.Editor( {
        fields: [ {
            label: 'CSV file:',
            name: 'csv',
            type: 'upload',
            ajax: function ( files ) {
                // Ajax override of the upload so we can handle the file locally. Here we use Papa
                // to parse the CSV.
                Papa.parse(files[0], {
                    header: true,
                    skipEmptyLines: true,
                    complete: function (results) {
                        if ( results.errors.length ) {
                            console.log( results );
                            uploadEditor.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );
                        }
                        else {
                            uploadEditor.close();
                            selectColumns( editor, results.data, results.meta.fields );
                        }
                    }
                });
            }
        } ]
    } );

    var table = $('#o_control').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.o_control.php',
        columns: [
            {
                "data": "o_control.date_control"
            },
            {
                "data": "o_type_control.libelle_type_controle"
            },
            {
                "data": "o_acteur_control.libelle_acteur"
            },
            {
                "data": "o_control.ref_control"
            },
            {
                "data": "o_control.action"
            },
            {
                data: "o_control.controle_file",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "controle_file"
            }
                    /*{
                 data: "files",
                 render: function ( d, type, row ) {
                         if(d.length>0) {
                                  html ="";
                                  for (i = 0; i < d.length; i++) {
                                         html+= '<a href="'+usersEditor.file( 'files',files_id).web_path+'" class="example"><img src="images/file_types/pdf.png"/ width="32" height="32"></a>'
                                  }
                                  return html;
                         } else {
                                 return 'No image';
                         }
                 },
                 title: "Image"
         }*/

        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit' ,  editor: editor},
            { extend: 'remove', editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                    } );
                }
            },
            {
                extend: 'selectAll',
                className: 'btn-space'
            },
            'selectNone',
        ],
          "columnDefs": [ {
            
                "targets": 4,
                "createdCell": function (td, cellData, rowData, row, col) {
                  if ( cellData =='A faire' ) {
                    $(td).css('color', 'red')
                  }
                  if(cellData =='En cours') {
                    $(td).css('color', 'orange')
                  }
                  if(cellData =='Cloturé') {
                    $(td).css('color', 'green')
                  }
                 }
            },
            ],
        language: {
            processing:     "Traitement en cours...",
            search:         "Rechercher&nbsp;:",
            lengthMenu:     "Afficher _MENU_ &eacute;l&eacute;ments",
            info:           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
            infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix:    "",
            loadingRecords: "Chargement en cours...",
            zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable:     "Aucune donnée disponible dans le tableau",
            paginate: {
                first:      "Premier",
                previous:   "Pr&eacute;c&eacute;dent",
                next:       "Suivant",
                last:       "Dernier"
            },
            aria: {
                sortAscending:  ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    } );
} );

}(jQuery));

kthorngren

What happens with this code?

{
    data: "o_control.controle_file",
    render: function ( file_id ) {
        return file_id ?
            html= '<a href="'+usersEditor.file( 'files',files_id).web_path+'" class="example"><img src="'+editor.file( 'files', file_id ).web_path+'"/ width="32" height="32"></a>':
            return html;
            null;
    },
    defaultContent: "No image",
    title: "Image"
}

I'm not sure what the HTML will look like which is why we ask for a link to your page to see. Maybe right click on the cell and inspect it to see what HTML is generated and adjust as needed.

Kevin

mimi123456789

Nothing happens with this code, it's wrong.

I've found something better :
{ data: "files.system_path", "render": function ( data, type, row, meta ) { fichier = 'file:///'; return '<a href="'+data+'">Lien du fichier</a>'; } }

But, when I click on the link, I'm going to the page
c:/wamp64/www/test/upload/29.pdf

and I need to go to
file:///c:/wamp64/www/test/upload/29.pdf

Do you know how to add 'file:///' behind data ?

Thanks !

PS : I would like to show my page, but using live.datatables or js fiddle , how do you add your php files ?

mimi123456789

Found !!

{
                data: "files.web_path",
                "render": function ( data, type, row, meta ) {
                return '<a href="'+data+'">Lien du fichier</a>';
            }

And then, your pdf document open in firefox !

allan

Thanks for posting back - good to hear you've got it working.

Allan