jQuery Datatables use function as ajax data source instead of path or url

Question

How do you use functions as a data source for ajax with datatables? I'm using it in an electron application with a built in database where i'm calling a function, writing the results to a data.json file, and then using the file as the source:

populateData(); //gets data from db and writes output to data.json

let table = $('#accTransaction').DataTable({
      dom: 'Bfrtip',
      select: {
        style: 'single'
      },
      ajax: '../data.json',
      ...

Instead, it would be more efficient if I could call the db function directly like this but it's not working....not valid url.

let table = $('#accTransaction').DataTable({
      dom: 'Bfrtip',
      select: {
        style: 'single'
      },
      ajax: getData(),
      ...

I realize I can make the source 'data: newData,' but then I loose the ablility to call table.ajax.reload

setInterval( function () {
  table.ajax.reload( null, false ); // user paging is not reset on reload
  console.log('reloading..')
}, 3000 );

How do you use functions as a data source for ajax with datatables instead of url's or file paths?

Are you sure you are using jquery datatables? If not - which plugin do you use? — Dekel
– Dekel, Commented Aug 24, 2016 at 1:46
Maybe you can use function in data parameter in ajax option! — Majid Basirati
– Majid Basirati, Commented Aug 24, 2016 at 6:33
@Dekel, you can checkout the download builder at datatables.net/download to see lots of plugins. The ajax: is built in. See here datatables.net/examples/data_sources/ajax.html — jtlindsey
– jtlindsey, Commented Aug 24, 2016 at 10:59

davidkonrad · Accepted Answer · 2016-08-24 08:17:08Z

2

Dont know if it is any worth, but you could wrap the ajax call itself into a function, and in that function reinitialise the table using the destroy flag. From the demo below :

function reload(url) {
  $.ajax({
    url: url,
    type: 'get',
    dataType: 'json'
  })
  .done(function(json) {
     console.log(json) //check the reponse
     return $('#example').DataTable({
        destroy: true,
        data : json.data,
        columns: [
           { data: 'name', title: 'Name' },
           { data: 'position', title: 'Position' }
        ]
     })
  })
}

Now you can refresh the dataTable simply by

reload('url/to/json')

Where you can change the url to anything, just remember to change the columns definition properly ( or build it dynamically). It could be done using a interval :

setInterval(function() {
   reload('https://api.myjson.com/bins/38p4r')
}, 1000)

demo -> http://jsfiddle.net/zefL681c/

answered Aug 24, 2016 at 8:17

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

2 Comments

jtlindsey Over a year ago

Hey David, thanks for the option. The issue is I'm using table.ajax.relaod() so I don't have to rebuild the table and loose paging when data is updated datatables.net/reference/api/ajax.reload() . So I was trying to find a way to provide a non ajax function ( ajax: getData() ) that returns json, instead of providing a url to a file that contains json. I'm only building a file (data.json) so i can use the ajax table reload feature and keep the benefits that come with it.

davidkonrad Over a year ago

@jtlindsey, Yes, I understand that. The problem is that the ajax attribute not support promises. If it did it would be easy, but now we have a scenario where dataTables not is waiting for a data-getter method to finish before it is trying to access data, so another approach is necessary. You do not have to loose paging or sorting settings, in fact I believe a simple stateSave: true would solve that issue, it will save the settings on destroy and reload when it is reinitialised.

Collectives™ on Stack Overflow

jQuery Datatables use function as ajax data source instead of path or url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related