Use simple JSON string as data for Datatables "data" property

Graynoble

Hi all!

I cannot see the forest from the trees at the moment. I am trying to simply fill a datatable with a SIMPLE JSON string!

I have been trying to do this for HOURS and not sure what I am doing wrong!?!? I am almost positive its in the format of the JSON string... but I dont know how to validate the string for input into the data property.

Shouldn't this work?

            var tblReport = $('#gridReport').DataTable({
                destroy: true,
                order: [0, "asc"],
                select: false,
                data: JSON.stringify({ "data": [["3802416046557118500","123456XYZ","2","Base Center Pillar",false,"me","2018-06-29T16:21:00.483"]]}),
                columns: [
                { data: "REPORT_NO" },
                { data: "ITEM_NO" },
                { data: "QUANTITY" },
                { data: "DESCRIPTION" },
                { data: "INACTIVE" },
                { data: "CREATED_BY" },
                { data: "STAMPCREATED" }
                ]
            })

I have accomplished so very much in a short amount of time...but its the small battles that are taking the wind out of my sails.

Thanks all!
Jason

Graynoble

Update:

I have tried several dozen combinations including these:

                data: { "data": [{ "REPORT_NO" : "3802416046557118500", "ITEM_NO" : "12345XYZ", "QUANTITY" : "7", "DESCRIPTION" : "Base Center Pillar Upper - Right Hand", "INACTIVE" : false, "CREATED_BY" : "Me", "STAMP_CREATED" : "2018-06-29T16:21:00.483"}]},

                data: '{ "3802416046557118500", "12345XYZ", "7", "Base Center Pillar Upper - Right Hand", false, "me", "2018-06-29T16:21:00.483"}',

                data: '{ ""data"": [{ "REPORT_NO" : "3802416046557118500", "ITEM_NO" : "12345XYZ", "QUANTITY" : "7", "DESCRIPTION" : "Base Center Pillar Upper - Right Hand", "INACTIVE" : false, "CREATED_BY" : "Me", "STAMP_CREATED" : "2018-06-29T16:21:00.483"}]}',

All I want to do is pass a string to the Data property of a datatable. I'm using a modal form and thought I would populate it from a hidden element on the page which was, in turn, populated from a JSON return from my VB backend.

kthorngren

Two things:

1. If you are using the data option then you want to provide it with Javascript data not JSON data.
2. You have to Datatables to expect an array of objects by defining columns.data. But you are providing and array of array(s). You can remove the columns.data option.

Take a look at the Data doc page for more info regarding objects versus arrays.

The Javascript example shows exactly what you are doing.

Here is an example using your data:
http://live.datatables.net/rulonaki/1/edit

Notice the use of columns.title not columns.data. You don't need columns.title if you provide the thead in HTML.

Kevin

kthorngren

I have tried several dozen combinations including these:

Your first option would work with columns.data (assuming all the keys match) but you will want to remove the { "data": ..... } portion and just assign the array in the data object.

Object based example with your data:
http://live.datatables.net/geyibika/1/edit

The data object is used as the default location Datatables uses for the data when using the ajax option.

Kevin

Graynoble

Thank you Kthorngren! Much appreciated.