Answers

• rf1234 Posts: 2,991Questions: 87Answers: 421

  March 2023 edited March 2023

  Did you take a look at the api documentation?
  https://datatables.net/reference/api/

  And these examples?
  https://datatables.net/examples/ajax/index.html
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  March 2023 edited March 2023

  You can remove the empty thead and tbody tags. Your row data are objects so you will use columns.data to define the columns. Also use columns.title to build the thead. Something like this:

      var table = $('#my_table').DataTable({
          ajax: {
              url: '/my/api/endpoint',
              type: 'GET'
          columns: [
              { data: 'column1', title: 'Column 1' },
              { data: 'column2', title: 'Column 2' },
          ]
      });
  

  Kevin
• aranval Posts: 2Questions: 1Answers: 0

  March 2023

  @rf1234 Yes I did. All examples I found only refer to using files as a data source but not a get request.

  @kthorngren Thanks for the example! I applied it but nothing changed. On my server I see that only the page request is ever sent, but not the data request which goes to a different endpoint). The "data endpoint" is available, since I can use a regular ajax request to fetch data from there.

  Is there some way to feed this result to the table? I did try something like this after the table initialization, but it's not doing anything.

  var table = $('my_table').DataTable({
      ....
  });
  $.get('/my/api/endpoint', function(data, status, query) {
      table.rows.add(data).draw();
  })
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  March 2023

  All examples I found only refer to using files as a data source but not a get request.

  They are actually fetching the data via Ajax. You can see the result in the Ajax tab. Plus you can use the browser's Network Inspector tool to see the Ajax request and response.

  I applied it but nothing changed.

  I forgot one thing. Since your data is not in the data object as described in the Ajax docs you will need to use ajax.dataSrc like the second example.

  Is there some way to feed this result to the table? I did try something like this after the table initialization, but it's not doing anything.

  Yes, that should work. Remove the ajax option but leave the columns config. Likely the response is a JSON string not a Javascript object. You might need to use data = JSON.parse(data); before rows.add().

  Kevin