jQuery Datatables - Table header from AJAX response

Question

I am retrieving a dataset that will include different lengths of rows via the Datatables ajax request. For example, one response might be:

... ['jan', 'feb', 'march', 'april'] ...

where as a different response would only be:

... ['jan', 'feb'] ...

Most examples that I have seen have the table headers already hard-coded into the HTML. What I want to do is to dynamically update the headers and their respective column data.

I was hoping to be able to do something like this where I am able to update the headers with dataSrc, but by that time the datatable has already been created and fails to fill in the rest of the table correctly.

....
table = $('#datatables').DataTable( {
    "ajax": {
        "url": "/foo/bar/",
        "type": "GET",
        dataSrc: function (json) { 
            populate_table_header(json)
            return json.blah;
        }
},
...

I am perfectly ok with destroying and re-creating the table, I just need to know how to create the table while using the AJAX response data for new headers.

Edit

Here's an example

   {  
  "data":[  
     ...
     [  
        "8290808-123123",
        "Boo Far",
        "[email protected]",
        "Other",
        "12",
        "21390",
        "123",
        "-",
        "-"
     ],
     [  
        "123123-032489",
        "Foo Bar",
        "[email protected]",
        "Name",
        "1",
        "2",
        "50",
        "-",
        "-"
     ],
     ...
  ],
  "header":[  
     "Owner",
     "Subscription",
     "Oct '16",
     "Nov '16",
     "Dec '16",
     "Jan '17",
     "Feb '17"
  ],


}

Is this possible without making a separate AJAX call before initializing the datatable?

You probably need to interrogate the data before initialising the DataTable and there define your columns before populating the table with data. Does that make sense? — annoyingmouse
– annoyingmouse, Commented Feb 9, 2017 at 9:57
Yes, makes sense. I was just hoping not to have to make the AJAX request outside of the datatables initialization. — Donato Perconti
– Donato Perconti, Commented Feb 9, 2017 at 14:51
It's sort of possible (I think, anyway) but a bit of a faff and I've not tested it with your data, perhaps if you provide a richer example of the data you want to display we can take a look? — annoyingmouse
– annoyingmouse, Commented Feb 10, 2017 at 7:04

Qh0stM4N · Accepted Answer · 2017-02-09 07:23:12Z

1

try this answers. datatables.net

allan's say

Good to hear you got it working :-)

If you can not solve the problem like this add live jsfidde demo to may helpfull you. Good luck with job.

answered Feb 9, 2017 at 7:23

Qh0stM4N

2922 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Donato Perconti Over a year ago

Thanks for the response. I saw that post earlier but was hoping to not have to have to make the AJAX request outside of the datatables initialization. Seems like that might not be possible, though.

Qh0stM4N Over a year ago

Maybe it is possible but I do not know a easy method of this. If you take a look at the datatables.js debug mode, you have a very complex and modular structure :D sorry. I have't premium support from datatables.net. You can use destroy - init method if it is not causing a huge performance problem.

Collectives™ on Stack Overflow

jQuery Datatables - Table header from AJAX response

Edit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related