Forums

Board index » YUI 2.x: » DataTable and DataSource

Page 1 of 2   [ 15 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile
Tags:

Server side pagination for datatable with xml response

Post Posted: Sun Dec 18, 2011 11:35 pm
+0-
Can any one tell me how to do server side pagination with xml response.
Below is my Xml Response
Employee.xml
<EmployeeInformation>
<EmployeeDetails>
<FirstName>John</FirstName>
<LastName>John1</LastName>
<AssociateId>1</AssociateId>
<Flag>hello</Flag>
</EmployeeDetails>
<EmployeeDetails>
<FirstName>Ram</FirstName>
<LastName>ram1</LastName>
<AssociateId>2</AssociateId>
<Flag>hello1</Flag>
</EmployeeDetails>
</EmployeeInformation>

And below is the source code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="datatable.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="container_core-min.js"></script>
<script type="text/javascript" src="menu-min.js"></script>
<script type="text/javascript" src="dragdrop-min.js"></script>
<script type="text/javascript" src="connection-min.js"></script>
<script type="text/javascript" src="element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="datasource-min.js"></script>
<script type="text/javascript" src="datatable-min.js"></script>
<style>
.yui-skin-sam .yui-dt-liner {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.yui-skin-sam .yui-dt td.myHilight {
background-color:#FFCC00; /* yellow-ish color */
}
.yui-skin-sam .yui-dt tr.myHilight1 {
background-color:#66CC66; /* yellow-ish color */
}
</style>
<script>
var myDataTable;

YAHOO.util.Event.onAvailable("rendertarget", function () {

/*
"click" event handler for the Menu instance - used to keep the Menu
instance visible when clicked, since by default a Menu instance
will hide when clicked.
*/

function onMenuClick(p_sType, p_aArgs, p_oValue) {

this.show();

}


/*
"click" event handler for each MenuItem instance - used to log
info about the MenuItem that was clicked.
*/

function onMenuItemClick(p_sType, p_aArgs, p_oValue) {

if(this.cfg.getProperty("checked")) {
myDataTable.hideColumn(this.cfg.getProperty("text"));
this.cfg.setProperty("checked", false);
//alert(this.cfg.getProperty("text"));
} else {
myDataTable.showColumn(this.cfg.getProperty("text"));
this.cfg.setProperty("checked", true);
//alert(this.cfg.getProperty("text"));
}


}


/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/

var oMenu = new YAHOO.widget.Menu("mymenu", {maxheight:400});


/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/

oMenu.addItems([

// Register a "click" event handler for the first item.

{ text: "FirstName", onclick: { fn: onMenuItemClick } },


/*
Register a "click" event handler for the second item,
passing a string arguemnt ("foo") to the event handler.
*/
{ text: "LastName", onclick: { fn: onMenuItemClick, obj: "foo" } },
{ text: "AssociateId", onclick: { fn: onMenuItemClick, obj: "foo" } }

]);


oMenu.subscribe("click", onMenuClick);


/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/

oMenu.render("rendertarget");


YAHOO.util.Event.addListener("addorremove", "click", oMenu.show, null, oMenu);

});

function getData() {
var myDataSource = new YAHOO.util.DataSource('DataTableProvider');
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
resultNode: "EmployeeDetails",
fields: ["FirstName","LastName","AssociateId","Flag"]
};
myDataSource.scriptQueryParam="targetId"+document.getElementById('myQuery').value;
var myColumnDefs = [
{key:"FirstName",resizeable:true,sortable:true},
{key:"LastName",resizeable:true,sortable:true},
{key:"AssociateId",resizeable:true,sortable:true},
{key:"Flag",resizeable:false,hidden:true}
];

myDataTable = new YAHOO.widget.DataTable("myTable", myColumnDefs, myDataSource,{draggableColumns:true,paginator: new YAHOO.widget.Paginator({rowsPerPage:15})});
// Enable cell highlighting
// myDataTable.subscribe("cellMouseoverEvent", myDataTable.onEventHighlightCell);
// myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell);
// Enable row highlighting
// myDataTable.subscribe("cellUpdateEvent",myDataTable.onEventHighlightCell);
// myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
// Enable Column highlighting
// myDataTable.subscribe("theadCellMouseoverEvent", myDataTable.onEventHighlightColumn);
// myDataTable.subscribe("theadCellMouseoutEvent", myDataTable.onEventUnhighlightColumn);
myDataTable.subscribe('renderEvent',function() {
var col=myDataTable.getColumnSet().headers;
// alert(col);

var rs = myDataTable.getRecordSet(), len = rs.getLength();
// alert(rs);

for (var index=0; index < len; index++) {
var flagValue=myDataTable.getRecord(index).getData("Flag");
var oRow = myDataTable.getTrEl(myDataTable.getRecord(index));
if(flagValue.toString().indexOf("highlightrow=true") !=-1) {
YAHOO.util.Dom.addClass(oRow,'myHilight1');
}

for(var i=0;i<col.length-1;i++) {
// alert(col[i]);
var oCell = myDataTable.getTdEl( {record:myDataTable.getRecord(index), column:myDataTable.getColumn(col[i].toString())});
//alert(oCell);
//alert(flagValue.indexOf("true"));

// alert("i"+i+":k"+k);
// alert("flagValue"+flagValue.toString());
// alert(col[i].toString()+"=true");
//alert(col[i].toString());
if(flagValue.toString().indexOf(col[i].toString()+"=true") != -1) {
YAHOO.util.Dom.addClass(oCell,'myHilight');
}

}
}

});

var myCallback = {
success: myDataTable.onDataReturnInitializeTable ,
failure: function() {
YAHOO.log("Polling failure", "error");
},
scope: myDataTable
};
myDataSource.setInterval(10000, null, myCallback);

}


</script>
</head>
<body class="yui-skin-sam">

<input type="text" name="myQuery" id="myQuery"/>
<input type="button" value="Click here" onClick="getData()"/>
<div id="rendertarget"></div>
<a href="#" id="addorremove">Add/Remove</a>
<div id="myTable"></div>
</body>
</html>

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 12:35 am
+0-
Hello ravikiran.

You may give a look at "DataTable Control: Server-side Pagination and Sorting for Dynamic Data" example:
http://developer.yahoo.com/yui/examples ... cdata.html

Or "DataTable Control: Filtering of Dynamic Data" example:
http://developer.yahoo.com/yui/examples ... ilter.html

Generally speaking, I would follow these steps:
- developing a snippet with a generic xml request
- developing a snippet with a datatable with xml datasource
- adding to the datatable a client paginator
- adding on the server side the pagination logic

The examples suggested use JSON format, but it should be straightforward to port them to XML one.

I cannot understand what it is the issue reading the snippet.

Hope that helps,
IceBox

P.S. Usually it is better to provide a well-formatted code with jsfiddle or pastebin services (be aware not to do a mere copy&paste); it should be a working and readable snippet. Otherwise it could be feasible also a public link.

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 12:44 am
+0-
HI icebox,
I have made the following changes to xml and datatable config properties.I am getting data error.
Xml Response after adding meta fields
<EmployeeInformation totalRecords="909" startIndex="0">
<EmployeeDetails>
<FirstName>John</FirstName>
<LastName>John1</LastName>
<AssociateId>1</AssociateId>
<Flag>hello</Flag>
</EmployeeDetails>
<EmployeeDetails>
<FirstName>Ram</FirstName>
<LastName>ram1</LastName>
<AssociateId>2</AssociateId>
<Flag>hello1</Flag>
</EmployeeDetails>
</EmployeeInformation>

var myDataSource = new YAHOO.util.DataSource('DataTableProvider');
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
resultNode: "EmployeeDetails",
fields: ["FirstName","LastName","AssociateId","Flag"],
metaFields: {
totalRecords: "totalRecords",
startIndex: "startIndex"
}

};
myDataTable = new YAHOO.widget.DataTable("myTable", myColumnDefs, myDataSource,{draggableColumns:true,paginator: new YAHOO.widget.Paginator({rowsPerPage:25}), dynamicData: true});

myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
alert(oResponse.meta.totalRecords);
oPayload.totalRecords = oResponse.meta.totalRecords;
oPayload.pagination.recordOffset = oResponse.meta.startIndex;
return oPayload;
};

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 12:53 am
+0-
Hi Icebox,
Please see the below pastebin link for the code
http://pastebin.com/saHcedMy

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 12:56 am
+0-
Hello ravikiran.

Usually that error happens when there is not a correct datasource definition for the data.

You may give a look at the following example:
http://blunderalong.com/pub/dtb/dt_xml_xpath_demo.html

Hope that helps,
IceBox

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile
Tags:

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 1:06 am
+0-
I have placed alert() in the code it is showing as undefined
myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
alert(oResponse.meta.totalRecords);
oPayload.totalRecords = oResponse.meta.totalRecords;
oPayload.pagination.recordOffset = oResponse.meta.startIndex;
return oPayload;
};

This is the xml which i am getting from server
<EmployeeInformation totalRecords="909" startIndex="0">
<EmployeeDetails>
<FirstName>John</FirstName>
<LastName>John1</LastName>
<AssociateId>1</AssociateId>
<Flag>hello</Flag>
</EmployeeDetails>
<EmployeeDetails>
<FirstName>Ram</FirstName>
<LastName>ram1</LastName>
<AssociateId>2</AssociateId>
<Flag>hello1</Flag>
</EmployeeDetails>
</EmployeeInformation>

here total records should be 909.


Last edited by ravikiran1288 on Mon Dec 19, 2011 1:07 am, edited 1 time in total.

Alberto Santini

YUI Contributor

  • Offline
  • Profile
Tags:

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 1:07 am
+0-
Hello ravikiran.

Give a look at viewtopic.php?f=90&t=8090

Maybe resultsList is relevant.

I cannot test your snippet.

Regards,
IceBox

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 1:10 am
+0-
well this the the response schema
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
resultNode: "EmployeeDetails",
fields: ["FirstName","LastName","AssociateId","Flag"],
metaFields: {
totalRecords: "totalRecords",
startIndex: "startIndex"
}

};

ravikiran

  • Username: ravikiran1288
  • Joined: Mon Nov 07, 2011 9:17 pm
  • Posts: 94
  • Offline
  • Profile

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 1:12 am
+0-
Is any thing wrong with this schema

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: Server side pagination for datatable with xml response

Post Posted: Mon Dec 19, 2011 1:12 am
+0-
Hello ravikiran.

Did you try 'resultsList' instead of 'resultNode'?
Did you read the topics suggested?

Another resource is viewtopic.php?f=90&t=7456

Hope that helps,
IceBox
Page 1 of 2   [ 15 posts ] Go to page 1, 2 Next
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