Example of files array

nitink

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

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

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

nitink

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

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

nitink

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.