How can one web page be constructed to display different tables on each invocation

spickens

Here's the backstory: I have a dashboard in my app. Each user selects the charts to display from an inventory of available charts. So, each user's dashboard is different. Behind each chart is a table of data. When the user clicks on the chart, the app navigates to a web page to display the behind-the-scenes table. It would be very inconvenient to need a different web page for each possible chart. How can I create or alter a web page "on the fly" to contain the JavaScript that datatables.net needs. You can tell from the question that I'm a newbie to programming.

colin

Hi @spickens ,

You can build an HTML table on the fly easily with either jQuery or just by manipulating the DOM wth JS. DataTables can then be assigned to the new table.

Hope those links help,

Cheers,

Colin

spickens

They are both interesting posts, thank you Colin. But, as it always seems to be the case, one question leads to another. The next problem is how to change the JavaScript itself. If you can bear with me, using datatables.net requires JavaScript specific to the table you want to display, mostly in the ColumnDefs and Columns data elements. How does one generate those JavaScript elements to match the returned JSON payload?

colin

You only need to worry about the columns and columnDefs options if you're grabbing the data from a remote source, as you were doing with the Ajax return data.

So, if you're doing remote calls to get the data, then you already know the data that's coming back (as you would've written the remote script) so it'll be no trouble creating a table for that.

Or, if you're just using static data, or Ajax sourced data where you create the table on the fly, then you just point DataTables at that new table (by the jQuery selector) and with minimal customisations everything will work.

Hope that makes sense.

C

spickens

Thank you. I going to think on your reply, study, and experiment.

spickens

OK. I've done the studying and experimentation. Here's the most direct question I can muster: In order to create a table on the fly, which means I don't know the columns in advance, do I first issue an ajax call inside $(document).ready to obtain the column and columnDef objects and then do a second ajax call inside $("#demoGrid").DataTable(), which is also inside $(document).ready to obtain the actual data rows, providing DataTable() with the column and columnDef object obtained in the first ajax call? Creating the

<

table> object can wait until this is resolved.

colin

Hi again,

You would only need the single Ajax call if you're getting all the data on that first hit, and all the processing is client-side. If you're doing server-side processing then it would need to be more considered.

This page may be interesting. You could do this to create your table, it would set it up perfectly, with the <thead> elements too. You would modify line 22 of the client side JS for the table ID and styling class, something like:

<table id="example" class="display nowrap" width="100%">

Then, you just point DataTables at it by passing in the jQuery selector.

Cheers,

Colin