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,
dkim18Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / 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: http://tablesorter.com/docs/example-ajax.html
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.
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?
0
Alexandre SimõesManager / 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.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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:
$('#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.)
0
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.
0
dkim18Author Commented:
This question is NOT about data table column sorting. That is in another question.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28273195.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.)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.