How do i design my columns field?

phavanagi

Hello all,

This is my JSON data :

---

**NextPageUrl : "http://localhost:50001/api/queuedprice/2/50"
PageNumber:1
PageSize:50
PreviousPageUrl:null
Results: (Its an array of 50 elements, have just given 3 here)
          0:
              EffectiveDate:"2017-03-03T00:00:00"
              Id:1
              Price:116.8309
              Security:"IBM 8.375 19"
              SecurityId:553

          1:
            EffectiveDate:"2017-03-10T00:00:00"
            Id:2
            Price:116.5575
            Security:"IBM 8.375 19"
            SecurityId:553

           2:
              EffectiveDate:"2017-03-17T00:00:00"
              Id:3
              Price:116.3917
              Security:"IBM 8.375 19"
              SecurityId:553

TotalNumberOfPages:2667
TotalNumberOfRecords:133332**

---

I need to display these in a grid and I have written the following in the column field but when I run the code it says no data available but I do get the JSON response from the server. So, I think I am not mapping the fields properly in the column. This is what I have written :

---

columns: [
                     
                     { data: 'NextPageUrl' },
                     { data: 'PageNumber' },                      
                     { data: 'PageSize' },
                     { data: 'PreviousPageUrl' },
                     { data: 'Results.EffectiveDate' },
                     { data: 'Results.Id' },
                     { data: 'Results.Price' }
                     { data: 'Results.Security' },
                     { data: 'Results.SecurityId' },
                     { data: 'TotalNumberOfPages' },
                     { data: 'TotalNumberOfRecords' }
                     
                     
                 ]

---

I think results is an array and I have not provided that in my code, can you please let me know how to write that?

Thanks.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you show us the raw JSON rather than the formatted version please?

Allan

phavanagi

Attached is the raw JsonData (through AJAX call) that is received.

tangerine

Are you now defining ajax.dataSrc, as you were told in your other thread?

https://datatables.net/forums/discussion/43426/putting-the-json-data-into-a-grid-html-table-using-datatables#latest

kthorngren

I'm confused by what you are trying to do. Looks like you are returning page info (page number, size, total pages, etc) once in the JSON plus 5 columns of data for each row. However your columns definition is defining the page info to be displayed in each table row.

It looks like you want to do server side processing but your data structure is different than the Datatables structure for SSP. Are you using different code for server side processing? Do you want the page info displayed in each row?

Your rows are in Results. As noted above by Tangerine you need to use the option ajax.dataSrc to tell Datatables where to find your data. Then remove the Results. from the columns definition and remove the page info from the columns definition.

Not sure what the rest of your javascript looks like but this might get you started:

$('#example').dataTable( {
  "ajax": {
    "url": "your ajax url goes here",
    "dataSrc": "Results"
  },
columns: [
                      
                     { data: 'EffectiveDate' },
                     { data: 'Id' },
                     { data: 'Price' }
                     { data: 'Security' },
                     { data: 'SecurityId' },
                      
                 ]
} );

Kevin

phavanagi

@tangerine and @kthorngren Thanks for your replies.

Yes, I have defined ajax.dataSrc, but the problem is the JSON data I am getting is from a web service and I can not change the code at the server end. Hence the JSON data can not be manipulated. My concern is whether I can use DataTables because of the structure of the JSON data? Since the data has simple info(page no,next url) and an array (Results). Can I accommodate that in my column field?

If I set my datasrc as 'results' I can only fetch the fields inside the result array(effectiveDate, Id, Price...) and not get the 'NextPageUrl','PageNumber','PageSize,'PreviousPageUrl', Since they are not in the results array.

Regarding the structure of the table, I was thinking of displaying the same "page fields" 50 times as there are 50 results. I don't know how to work this around.

Thanks

kthorngren

One way you may be able to accomplish what you want is to use ajax to get the data outside of Datatables (before DT initialization). You can place the effectiveDate, Id, Price, etc data into a variable then inside Datatables assign that variable to data. You can see examples here:
https://datatables.net/manual/data/

You could take the paging info and display outside of the table and provide the link to get a new page. When getting a new page you can clear() the table then use rows.add() to populate the table with the new data. This method is flexible and allows you to display the page info in each row instead somewhere outside of the table.

You could also use rows.add() to initially populate a blank Datatable instead of assigning to data.

Kevin

phavanagi

Thanks @kthorngren. I understand now how to do it. Will try that!

Also, is there a way to not do pagination? Can I display all the rows at one go and not paginate my records?

phavanagi

Its ok. I got it

kthorngren

I understand now how to do it. Will try that!

Great, please post if you have questions.

You can use paging to enable/disable paging.

Kevin