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:

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,
Who is Participating?
Alexandre SimõesConnect With a Mentor Manager / Technology SpecialistCommented:
From your server you can get all resultsets like:

{ table1:  [ json array for table 1 ], table2: [ json array for table 2 ], table3: [ json array for table 3 ]}

With this, as you know what each array represents, you only need to assign the correct datasource to each table.
Note that this plugin you're using is not very smart, so you have to actually generate the <tr> elements for each row.
You can see here:
They append data but actually the request returns already HTML, not JSON.

I don't know how far you want to go with this grid but you're not just transforming a rendered <table> which I believe is the main goal of this plugin.
If you need something more advanced have a look at jqGrid
dkim18Author Commented:
I am just using example here for sorting and filtering in client-side once all the tables are loaded with data from DB.

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?
Alexandre SimõesConnect With a Mentor Manager / Technology SpecialistCommented:
You're on a JAVA back-end right?
How are you serializing your data to JSON?
Personally I use GSON

Using this tool you just need to create your object (class) with one property for each table source returning lists:
public class MyDataSource {
     public ListyTable1ItemType> table1Source { ... }
     public ListyTable2ItemType> table2Source { ... }
     public ListyTable3ItemType> table3Source { ... }

Open in new window

and use GSON to serialize the whole class.
Never miss a deadline with

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

dkim18Author Commented:
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:
"sAjaxSource": "........./TestDataServlet............?tableName=tableOne",

"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õesManager / Technology SpecialistCommented:
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.
dkim18Author Commented:
This question is NOT about data table column sorting. That is in another question.

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.)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.