asked on

Formating JSON data for multiple data tables with tabs

Hi Experts,

I am working on multiple jquery data tables (with multiple tabs). I was able to load one table like this:

 $('#testOne').dataTable( {			 
			  "sAjaxSource": "...............",		
			  "bServerSide": false,
...
...
<table cellpadding="0" cellspacing="0" border="0" id="testOne'" >

Open in new window

and the JSON data format is like this:

{"iTotalDisplayRecords":30,"iTotalRecords":30,"aaData":[{"3":"123",...}],"sEcho":"1"}

Open in new window

Now, I am trying to load another data table with data and I can get similar JSON data from server side language(Java), but I don't know how to format each JSON. (So far, I get "JSON data from server could not be parsed" error.)
My question is which JSON data go which data table. How do I match that?

For my project, since database queries take a bit long, I want to call servlet one time only.
So, I want get all the JSON data with one servlet call and load all tables.

thanks in advance,

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dkim18

ASKER

I am just using example here for sorting and filtering in client-side once all the tables are loaded with data from DB.
http://tablesorter.com

So, if I want to use JSON, should it be like this?

table1: {"iTotalDisplayRecords":30,"iTotalRecords":30,"aaData":[{"3":"123",...}],"sEcho":"1"},
table2: {"iTotalDisplayRecords":30,"iTotalRecords":30,"aaData":[{"3":"123",...}],"sEcho":"1"},
...
...

How do I add them all in one JSONObject?

SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dkim18

ASKER

Hm...I just start to learn JQuery and JSON and I have not used GSON.
If there is an easy to understand example, I may consider that.

By the way, I added a script for each table like this:

$('#tableOne').dataTable({
"sAjaxSource": "........./TestDataServlet............?tableName=tableOne",
...
...
});

$('#tableTwo').dataTable({
"sAjaxSource": "........./TestDataServlet............?tableName=tableTwo",
...
...
});

Open in new window

In TestDataServlet, I grap the tableName parameter and generate JSON data. I tested two tables, it seems working.

Before this idea, I wasn't thinking passing tableName parameter, so I was thinking this will access DB for unrelated tables as well.
Any disadvantages if I do like this? (I have five data tables and each will have around 15 rows.)

Alexandre Simões

Hi mate...

One of us is making some sort of confusion here.
The TableSorter plugin that you mentioned before doesn't support ajax datasource out of the box.
On the other hand, from your last sample code I noticed that you're in fact using DataTables now that actually supports ajax datasource.

Anyway, for your solution, it seems correct to me.
It will only allow access to unrelated tables if you let it.
Don't just pass the table name to the query that returns the data (apart from SQL Injection security problems). On the Servlet, evaluate the name passed and if it matches one of the expected names then perform the action, otherwise just throw an error or return empty.

dkim18

ASKER

This question is NOT about data table column sorting. That is in another question.

https://www.experts-exchange.com/questions/28273195/JQuery-data-table-column-image-link-sorting.html

This question is about formating JSON data for multiple tables. I use ajax call only once to load up the tables with data. (After that, I do sorting and filtering client side.)