How do I initialize Datatables editor with file information (like upload)?

jrayrcconsulting

Hi,

I have been struggling for hours with this -- I have what looks like a fully working (according to the docs) but nothing renders.

My table will have images in one column, that users will be able to upload (and which should refresh in place, once the upload completes). So, I am trying to use the files() system to link these images for display in the table but it is not working. Whenever I add file information, it prevents data rendering at all (sits at loading...).

I have an access limited but publicly accessible test case, yes. PM me for login, and I will send all details.

var dataSet = {"id":"2366","Project_Name":"Logan Marketing Server Hardware Install","Date_Start":"08\/22\/2013","Date_End":"08\/25\/2013","Contact":"Ryan Alvarez Smith","id_staff":"STA001","Staff":"John Smith","Category":"Internal","Status":"Active","Project_Bar_Code":"2366"}

If I remove all files information and only ship an array of data like above, it works (but does not render images, because there is no file information available for the displayImg function).

Any guidance you can provide?

Example, this is what I am using below and it does not render any data if I bring the files table in, as my demo below. This follows the docs, I think.

$(document).ready(function() {
          
          editor = new $.fn.dataTable.Editor( {
                "ajax": "ajax/editor.php",
                "table": "#example",
                "idSrc": "id",
                "fields": fields
            } );
          
          var table = $('#example').DataTable( {
            dom: "Bfrtip",
            lengthChange: false,
            pageLength: 10,
            ajax: "ajax/editor.php",
            idSrc: "id",
            data: dataSet,
            columns: columnDefs,
            select: 'single',
            lengthMenu: [
            [ 5, 10, 25, 50, -1 ],
            [ '5 rows', '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
            buttons: [
                { extend: "create", text:"New", editor: editor },
                { extend: "remove", text:"Delete", editor: editor },
                { extend: "edit", text:"Edit", editor: editor },
                'pdf',
                'print',
                'excel',
                'pageLength'
            ]
        } );
});

abbreviated data set example:

var dataSet = {"data":[{"id":"2366","Project_Name":"Logan Marketing Server Hardware Install","Date_Start":"08\/22\/2013","Date_End":"08\/25\/2013","Contact":"Ryan Alvarez Smith","id_staff":"STA001","Staff":"John Smith","Category":"Internal","Status":"Active","Project_Bar_Code":"2366"}],"files":{"files":{"2366":{"web_path":"https:\/\/address.com\/Streaming_SSL\/Additional_1\/12EFA5DE0F6436213726A018FFDA40482144B852B57C03B66405282EA5E217FC.png?RCType=EmbeddedRCFileProcessor","id":"2366"}}}};

columnDef:

{
title: "Project_Bar_Code",
render: displayImg,
defaultContent: "No Image",
data: "Project_Bar_Code"
}

field def:

{
    label: "Project_Bar_Code",
    name: "Project_Bar_Code",
    type: "upload",
    display: displayImg,
    clearText: "Clear",
    noImageText: 'No image',
    submit: false,
    ajaxData: function(d){
        d.append('id', editor.ids( false ));
    }
}

and displayImg function is:

function displayImg(data, type, full, meta) {
    if (data === '') {
        return null;
    } else {
        console.log("Data: " + data);
        console.log("Type: " + type);
        console.log("Full: " + JSON.stringify(full));
        console.log("Meta: " + meta);
        if (!isNaN(data)) {
            // check if is number
            var data = editor.file('files', data).web_path
        }
        const url = new URL(data);
        var part1 = url.pathname;
        var part2 = url.search;
        var finalpath = part1 + part2
        console.log("Final Path: " + finalpath);
        var string = '<img src="/shuttle.php?image=' + finalpath + '" />';
        return string;
    }
}

allan

You are defining both:

ajax: "ajax/editor.php",

and

data: dataSet,

You don't want to do that :-). Do one only - no need for two data sources. I'm not actually even sure what would happen if you did that - this error I guess!

If you want to use local data, use data and pass it the array of data (in this case dataSet.data). If you want to return JSON from the server, remove the data option.

Allan