Example of files array

nitink · August 2019

We wanted to know if there is a sample for how the "files" : [] array is sent from server to client to populate DataTables.

Here is what we are trying to achieve.

Step 1
- We load our page for the first time. The table is blank as expected.
- We click "New" to add a new row to the DataTables using DataTables Editor plugin.
- We fill in the required information which includes an image, so we upload the image and click "Create" button.
- The row is added and it displays fine in the DataTables.
- if we click on "Edit" button before refreshing the page, the "Editor" shows the data and the image just fine.
- We close the browser or refresh the page.
Step 2
- Our server retrieves the dat, constructs the required AJAX data and sends it to the browser
- DataTables displays the row we added earlier.
- We click on "Edit" for the row. Here we expect that the image we uploaded earlier will be displayed.

** NOTE ** - our table does not have a column for the image. The field is only available in the "Editor"

Our question: how should we construct the AJAX to send in the image (file) information.

{
  "data": [
    {
      "DT_RowId": "row_1",
      "first_name": "Quynn",
      "last_name": "Contreras",
      "phone": "1-971-977-4681",
      "city": "Slidell",
      "image": null
    },
    {
      "DT_RowId": "row_2",
      "first_name": "Kaitlin",
      "last_name": "Smith",
      "phone": "1-436-523-6103",
      "city": "Orlando",
      "image": null
    }
  ],
  "options": [],
  "files": []
}

The second last line in the code snippet above shows "files" : []. However we were unable to find documentation/syntax as to how this array is to be constructed.

Could you please point us in that direction?

Additional Info : we are not using DataTables server side code as we get the data from an API. Our server manipulates the data to conform with the AJAX that DataTables expects.

allan · August 2019

Hi,

We wanted to know if there is a sample for how the "files" : [] array is sent from server to client to populate DataTables.

This page contains a suitable example. Upload a couple of images and then reload the page and click the "Ajax load" tab below the table or use the browser's network inspector to see the loaded JSON.

Let me know if you run into any issues with that.

Allan

nitink · August 2019

Allan, thank you so much for a prompt response. I will try that and let you know if that works.

nitink · August 2019

It did not work for the following reason. I'm getting the following error. Can you please help?

No data available in table

Originally, I was sending AJAX data to Datatable as shown below. This works fine.

[
  {
    "title": "First Quiz",
    "description": "1st Quiz",
    "text": "This is the first quiz",
    "iconFilePath": "PATH TO FILE",
    "iconFile": null,
    "iconAltText": null,
    "videoFilePath": null,
    "videoFile": null,
    "imageFilePath": null,
    "imageFile": null,
    "expiryDate": "0001-01-01T00:00:00",
    "publishDate": "2019-08-27T00:00:00",
    "showScore": false,
    "showSummary": true,
    "showResultAfterQuestion": false,
    "showTotalNoOfQuestions": false,
    "canPause": false,
    "warningMsgOnQuit": null,
    "maxTimeToCompleteInSeconds": 0,
    "tags": null,
    "guestCodes": null,
    "questions": [],
    "id": 1,
    "isActive": true
  },
  {
    "title": "Third Quiz",
    "description": "3rd",
    "text": "3rd quiz",
    "iconFilePath": null,
    "iconFile": null,
    "iconAltText": null,
    "videoFilePath": null,
    "videoFile": null,
    "imageFilePath": null,
    "imageFile": null,
    "expiryDate": "2019-08-31T00:00:00",
    "publishDate": "2019-08-27T00:00:00",
    "showScore": false,
    "showSummary": true,
    "showResultAfterQuestion": false,
    "showTotalNoOfQuestions": false,
    "canPause": false,
    "warningMsgOnQuit": null,
    "maxTimeToCompleteInSeconds": 0,
    "tags": null,
    "guestCodes": null,
    "questions": [],
    "id": 4,
    "isActive": true
  }
]

With the example you showed, the new AJAX data comes up as follows

{
  "data": [
    {
      "Title": "First Quiz",
      "Description": "1st Quiz",
      "Text": "This is the first quiz",
      "IconFilePath": "1",
      "IconFile": null,
      "IconAltText": null,
      "VideoFilePath": null,
      "VideoFile": null,
      "ImageFilePath": null,
      "ImageFile": null,
      "ExpiryDate": "0001-01-01T00:00:00",
      "PublishDate": "2019-08-27T00:00:00",
      "ShowScore": false,
      "ShowSummary": true,
      "ShowResultAfterQuestion": false,
      "ShowTotalNoOfQuestions": false,
      "CanPause": false,
      "WarningMsgOnQuit": null,
      "MaxTimeToCompleteInSeconds": 0,
      "Tags": null,
      "GuestCodes": null,
      "Questions": [],
      "Id": 1,
      "IsActive": true
    },
    {
      "Title": "Third Quiz",
      "Description": "3rd",
      "Text": "3rd quiz",
      "IconFilePath": null,
      "IconFile": null,
      "IconAltText": null,
      "VideoFilePath": null,
      "VideoFile": null,
      "ImageFilePath": null,
      "ImageFile": null,
      "ExpiryDate": "2019-08-31T00:00:00",
      "PublishDate": "2019-08-27T00:00:00",
      "ShowScore": false,
      "ShowSummary": true,
      "ShowResultAfterQuestion": false,
      "ShowTotalNoOfQuestions": false,
      "CanPause": false,
      "WarningMsgOnQuit": null,
      "MaxTimeToCompleteInSeconds": 0,
      "Tags": null,
      "GuestCodes": null,
      "Questions": [],
      "Id": 4,
      "IsActive": true
    }
  ],
  "files": {
    "files": {
      "1": {
        "id": "1",
        "filename": "",
        "filesize": "",
        "web_path": "PATH TO FILE"
      }
    }
  }
}

Here is the Javascript

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor({
        ajax: {
            edit: {

                url: "https://localhost:9001/CC/savequiz",
                type: "POST",
            }
        },

        ajax: "https://localhost:9001/CC/savequiz",
        table: "#tblQuiz",
        idSrc: "id",
        serverSide: false,
        fields: [
            {
                type: "hidden",
                label: "Id:",
                name: "id"
            },
            {
                label: "Title:",
                name: "title"
            },
             {
                label: "Description:",
                name: "description"
            },
            {
                label: "Text:",
                name: "text"
            },
            {
                label: "Publish Date:",
                name: "publishDate",
                type:   'datetime',
                def:    function () { return new Date(); },
                format: 'MM/DD/YYYY',
                fieldInfo: 'US style m/d/y format'
                //def: function () { return new Date(); },
            },
            {
                label: "Expiry Date:",
                name: "expiryDate",
                type: 'date',
                def: function () { return new Date(); },
            },
            {
                label: "Show Score:",
                name: "showScore",
                type:  "checkbox",
                options: [
                    { label: "Yes", value: 1 },
                    { label: "No", value: 0 }
                ],
                separator: '',
                unselectedValue: 0
            },
            {
                label: "Quiz can be paused?:",
                name: "canPause",
                type:  "checkbox",
                options: [
                    { label: "Yes", value: 1 }
                ],
                separator: '',
                unselectedValue: 0
            },
            {
                label: "Show Total No. of Questions?:",
                name: "showTotalNoOfQuestions",
                type:  "checkbox",
                options: [
                    { label: "Yes", value: 1 }
                ],
                separator: '',
                unselectedValue: 0
            },
            {
                label: "Show Result after each Question?:",
                name: "showResultAfterQuestion",
                type:  "checkbox",
                options: [
                    { label: "Yes", value: 1 }
                ],
                separator: '',
                unselectedValue: 0
            },
            {
                label: "Quiz Icon:",
                name: "iconFilePath",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }

        ]
    });




    $('#tblQuiz').DataTable({
        dom: "Bfrtip",

        serverSide: false,
        "ajax": {
            "url": "https://localhost:9001/CC/getquizzes",
            "type": "GET",
            "datatype": "json",
            "dataSrc": function (json) {
               //var xx = JSON.parse(json);
                return json;
            }
        },
        idSrc: "id",

        columns: [
            { "data": "id" , "visible": false },
            { "data": "title" },
            { "data": "description" },
            {
                "data": "publishDate",
                "render": function (data) {
                    var date = new Date(data);
                    var month = date.getMonth() + 1;
                    return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
                }
            },
            {
                "data": "expiryDate",
                "render": function (data) {
                    var date = new Date(data);
                    var month = date.getMonth() + 1;
                    return (month.toString().length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
                }
            },
        ],

        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

nitink · August 2019

Allan, I also ran the debugger and it shows no error. I can "Upload configuration data" if it helps

nitink · August 2019

I found a solution. Here is what I did

in the Javascript for DataTable in the dataSrc function I return return json.data; instead of just return json; .
I changed the data member to Pascal Case instead of camel case as that is what the new method is returning from my server.

$('#tblQuiz').DataTable({
        dom: "Bfrtip",

        serverSide: false,
        "ajax": {
            "url": "https://localhost:9001/CC/getquizzes",
            "type": "GET",
            "datatype": "json",
            "dataSrc": function (json) {
               //var xx = JSON.parse(json);
                return json.data;
            }
        },
        idSrc: "Id",

Thank you so much for your help.

Example of files array

Example of files array

Answers

Howdy, Stranger!

Categories

DataTables

Example of files array

Example of files array

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables