Datatables ajax object from memory with algolia search

timaeus

Hi all,

First of all, Allan, thanks for making datatables! Awesome stuff, I use it for multiple projects.

These last days I however keep running into a problem. I'm making use of Algolia to implement a (very quick) search bar. Concretely I'm experiencing two problems (both likely strongly related to me being a novice to javascript): getting datatables to accept an object in memory as an ajax source and consequently reloading the table.

When using an ajax object data source, the documentation uses a .txt. This seems strange to me, it should be an object, no? So I tried inputting an object and it doesn't seem to work. I've also tried converting the object to a json and writing it to localstorage. What am I not getting here?

Secondly, how can I initialise the table once and at the end of an algolia-ajax-call, reload the table? Because Algolia retrieves its results through ajax, if I load datatables upon document.ready, there is no data to display. I solved this through calling .dataTable at the end of the algolia ajax-call. This however creates an error when inputting search terms: "Cannot reinitialise DataTable", which is completely logical.

I've simplified the code used so it's very possible there are incoherent pieces here and there. The top of the paste bin contains an example JSON of the object I receive (in memory). The object can be nested like the json or simply an array of the 'hits'.

Paste bin here

Does anyone know how I can tackle this problem?

allan

When using an ajax object data source, the documentation uses a .txt. This seems strange to me, it should be an object, no?

The data in the text file contains a JSON object. That it is a text file ont he server is not something that DataTables really cares about - it could be generated by anything as long as it is valid JSON.

For client-side source data, then I would ignore the Ajax aspect altogether - just load the data you want using data as you have. Your example passes in a variable that doesn't appear to exist (data). Perhaps exampleData.hits would be more appropriate and change data: 'name' to data: 'player_name' since there is no name property.

Allan

timaeus

Hi, thanks for you response.

The example indeed doesn't work (because the algolia code doesnt work here). In my real word situation, the table renders through (with the data option you specified).

The (persisting) problem is, the available data for the table changes constantly (through algolia ajax). For example, upon initial loading of the page, the algolia data has a slight delay, and so datatables has no data to render.

But after the data becomes available (initially and subsequent queries), I'd like the table to reload. Through what function can I achieve this?

Thanks again :)

allan

rows().remove() and rows.add().

Allan

timaeus

Thank you!

timaeus

For anyone with this issue; I got it working by writing the function update_table(), calling it when an algolia ajax call was successful.

Attention to how to you initialise the table object; table = $('#DataTables_Table_0').dataTable(); returns a jQuery object, while table = $('#DataTables_Table_0').DataTable(); returns a dataTables API instance (which you need). See API documentation.

var updatedData;

function algolia_call () {
   // algolia-provided js .. do something
   // if call successful, update table
   updatedData = some_internal_variable
   table = document.getElementById("DataTables_Table_0");
   if (table !== null) { update_table() };
}

function update_table () {
    table = $('#DataTables_Table_0').DataTable();
    table.clear().draw();
    table.rows.add(updatedData).draw();
  }

Also, I delayed the initial rendering of the table by 100ms, just so algolia has enough time to fetch initial results, although that should only take about 25ms.

allan

Very nice - thanks for posting back with your solution!

Allan