Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile
Tags:

Data Table using JSON in YUI3

Post Posted: Fri Jun 01, 2012 8:14 am
+0-
Hi,
I am a new user. I have started using YUI recently.I am still learning about it. I was trying to get a Data Table working using JSON. I am storing the JSON data as a String in a java servlet and passing the value when the servlet is called. The servlet is running on Apache Tomcat 5.5. The JSON data that i am using is valid as i checked it on JSONLint. I have set the content type to "application/json" as well
The code that i am using to display the data from the JSON into the datatable is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
});
</script>
</head>
<body class="yui3-skin-sam yui-skin-sam">
<div id="basic"> </div>
<script>
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
var cols = ["FirstName", "LastName", "Company","Position","City","Country","Email","Telephone"];
ds = new Y.DataSource.Get({
source:"/BasicServlet"})
.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: "query.results.Rows",
resultFields: ["FirstName", "LastName", "Company","Position","City","Country","Email","Telephone"]
}
}),
dt = new Y.DataTable.Base({columnset:cols,
summary:"Test Data",
caption:"Table with JSON data"})
.plug(Y.Plugin.DataTableDataSource, {datasource:ds}).render("#firstName");

// Load the data into the table
dt.datasource.load();

});
</script>
</body>
</html>
I am seeing the actual table with the columns but not seeing any data in the table. Can anyone please guide me as to what is it that i am doing wrong? I am not seeing any errors on Firebug as well.Here is the sample JSON data:
{
"rows": [
{
"FirstName": "First name",
"LastName": "Last name",
"Company": "Company",
"Position": "Position",
"City": "City",
"Country": "Country",
"Email": "Email",
"Telephone": "Telephone"
},
{
"FirstName": "ABC",
"LastName": "DEF",
"Company": "CAZ ",
"Position": "MNO",
"Country": "ILM",
"Email": "ABC@abc.com"
},
{
"FirstName": "KIM",
"LastName": "HIR",
"Company": "HIRA ",
"Position": "VP",
"City": "IKM",
"Country": "IJP",
"Email": "KIM@HIRA.com",
"Telephone": "91-9000000000"
}
]
}
Can anyone please help me?

P.S: I am not sure if this is the right place to ask a question. Please excuse me if this is not the place.It would be great if some one could let me know the right place.Thanks!!!

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Data Table using JSON in YUI3

Post Posted: Fri Jun 01, 2012 11:52 am
+0-
Hello Rohit.

It seems the resultListLocator does not match with the json you provided.

Hope that helps,
IceBox

P.S.: Usually I use a local datasource before feeding the datatable with the real source. Also it helps if you provide a jsfiddle snippet or a live link to debug the code.

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile
Tags:

Re: Data Table using JSON in YUI3

Post Posted: Sun Jun 03, 2012 5:30 am
+0-
Hi Alberto,
Thanks for the reply. I did follow your advice and was able to load the data successfully locally. It was your post that helped me achieve this.
http://jsfiddle.net/RCCqu/ is what i followed.
Thanks for that post as well!!!
I will try loading the data from a servlet next.
Can you please let me know as to how i can make a particular column sortable from the above example of yours?
Also, if i wanted to change the appearance of the table to look something different what should i do? i tried changing the class attribute's value to "yui3-skin-night" but it did not work? Can you please suggest something

-Rohit

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Data Table using JSON in YUI3

Post Posted: Mon Jun 04, 2012 7:35 am
+0-
Hello Rohit.

For the sorting you can give a look at the docs:
http://yuilibrary.com/yui/docs/datatable/#sortapi

Or the example Column Sorting:
http://yuilibrary.com/yui/docs/datatabl ... -sort.html

The skin night is not available for all widgets:
viewtopic.php?f=93&t=9325

Regards,
IceBox

Todd Smith

YUI Contributor

  • Username: stlsmiths
  • Joined: Thu Nov 05, 2009 10:03 am
  • Posts: 675
  • GitHub: stlsmiths
  • Gists: stlsmiths
  • IRC: t_smith
  • Offline
  • Profile
Tags:

Re: Data Table using JSON in YUI3

Post Posted: Mon Jun 04, 2012 11:38 am
+0-
@RohitST
There are many ways to populate a DataTable via a remote JSON request. The normal technique is to use DataSource to "connect" the DataTable to the remote server using either DataSource.Get or DataSource.IO, as your initial posting did. I suspect as icebox noted that your 'resultListLocator' was incorrect. Setting "resultListLocator: 'rows' " would probably fix the initial posting.

Since you mentioned your servlet, another method that is sometimes used is to use an AJAX-type (via Y.IO for example) request to get the data locally, and then simply set the "data" attribute of your DataTable to the returned data, similar to your jsFiddle. (Note: your jsfiddle used YUI 3.4.1 which is rather outdated, see http://yuilibrary.com/yui/docs/datatable/migration.html for the changes via the current 3.5 codeline).

For what it's worth, I've published an example of using the non-DataSource approach available at http://blunderalong.com/yui/dtb/dt_json_io_noDS.html (which includes enabled "sorting" of columns).

A similar example that uses DataSource is http://blunderalong.com/yui/dtb/dt_json_io_new.html, likewise many other examples of YUI 3 DataTable usage are at http://blunderalong.com/yui.

Hopefully some of these can be of some help.

As @icebox mentioned, there are very few published CSS "themes" (called "skins" at YUI) available, only the basic "yui3-skin-sam" and the limited "yui3-skin-night" presently. Most of us end up doing alot of inspecting using firebug or chrome-tools within a browser to "tweak" the many CSS styles involved with DataTable.

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile

Re: Data Table using JSON in YUI3

Post Posted: Mon Jun 11, 2012 5:23 am
+0-
@Todd and @Alberto
Thank a lot for your replies. It helped me out a lot.
Regards,
Rohit
Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group