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

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

jrayrcconsultingjrayrcconsulting Posts: 1Questions: 1Answers: 0
edited September 4 in Editor

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;
    }
}

Answers

  • allanallan Posts: 52,661Questions: 1Answers: 8,058 Site admin

    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

Sign In or Register to comment.