How to best inject data to empty datatable after page has loaded?

timgalv

Sorry, but I can't quite figure this one out using the documentation (Likely because I'm somewhat new to a lot of this). So I have a page that will be a wizard of sorts. The first section of the page shows in a div and collects some input files and parameters in a form. There is a next button that submits that data via ajax to a servlet for processing. The servlet returns that data via JSON to the web page. At the same time I unhide the div containing my DataTable (which is initially empty). At the same time I unhide the table element on the page, I want to somehow "inject" this JSON object I got from the ajax call in to the datatable. Ideally, the table would not be locked to a certain number of columns (some results will have 4 columns, others 6).

I basically want to do something like:
function theOnClickFunction( jsonData ) {
var resultTable = $('#result_table').DataTable();
resultTable.data = jsonData;
resultTable.draw();
};

What is the best way to do this? There is quite a bit of data being sent in the ajax call (~50kb), and I couldn't quite find a way to make the ajax functionality of datatables work for me. I would prefer doing the ajax separately and just pass the new data to the table on the fly. Thank you in advance!

-Tim

rhino

If you need variable number of columns, then I think you'll have to build the table in jQuery before you turn it into a DataTable:

    headerRow = ['1st', '2nd', '3rd', '4th', ... ] //you'll probably have to build this based on incoming data
    
    function createTable(headerRow)
    {
        var table = $('<table><thead><tr></tr></thead><tbody></tbody></table>');
        var tr = table.find('thead tr');
        headerRow.forEach( function( val, index, arr ) {
            tr.append('<th>' + val + '</th>');
        });
        return table;
    }

Or something like that. Then add the ajax data via initialization, something like:

    var jsonString; //you got this from ajax somewhere
    
    var table = createTable( headerStuffs );
    $('#result_table').replaceWith( table );
    $('#result_table').DataTable( {
        data: JSON.parse( jsonString )
    });

Alternatively you can use rows().add() to add the ajax data, if you like/need.

rhino

I've made a little live.datatables.net demo for you as well. Hope that helps!

timgalv

Thanks, rhino! I appreciate the help!

ashiers

Since you're on the Java platform, you may want to also look at the JED website for further examples. http://jed-datatables.ca/jed/