Aleksandar Smiljanic <[EMAIL PROTECTED]> writes: > > Hi, > > I have a struts based application and want to integrate displaytag. > Mainly, I'm in for sorting and paging. It realy does a great job in > displaying tables. [snip] > What I > would realy want is to have the possibility to have a JavaScript > function on click on sorting/paging links > es. > <a onClick="callSomething(d-49653, 1, 2, 0);">CITY</a> > instead of > <a > href="/example-pse.jsp?d-49653-p=1&d-49653-o=2&d-49653-s=0">CITY</a></th> > > Any ideas/suggestions/samples ? > > A. Smiljanic >
I had a similar requirement. I came up with a solution that adds an onclick handler to the sorting and paging links which then invokes a javascript function of your choosing. It also automatically adds the sorting paging values to the form's action so you can just go ahead and submit the form. This was inspired by the javascript code on Matt Raible's blog here: http://raibledesigns.com/page/rd?anchor=the_future_of_the_displaytag It also works with multiple display tag tables on a single form. The only constraints it adds are adding a <div> with an ID around each table (in order to be able to locate the paging links for that table). Oh, and it uses prototype library (which it might be possible to eliminate, but I didn't try). It should be fairly easy to modify to pass the display tag sorting/paging parameters to your javascript function, rather than adding them to the form's action if you'd prefer that. I'll include it here in the hope it is useful for someone. Example usage: <div id="tableId"> <display:table> ... </display:table> </div> <script type="text/javascript">attachCallback($('tableId'), myCallback);</script> where myCallback is a no-arg javascript function. /** * Modifies the sorting and paging links on the given display tag table element * to invoke the specified callback function when clicked. * displayTagElement is the id of a <div> surrounding the display tag table. * That div should only include a single displayTag table, and no other tables. * This is necessary to get a handle on the paging content (which is above the actual table). */ function attachCallback(displayTagElement, callbackFunction) { var element = $(displayTagElement); // Find the sorting links; they are all the anchors in the <thead> element var theadElements = element.getElementsByTagName('thead'); if (theadElements && theadElements.length > 0) { var sortLinks = theadElements[0].getElementsByTagName('a'); addCallback(sortLinks, callbackFunction); } // Find the pageing links; they are all anchors in the div with classname of "pagelinks" var pageLinkElements = getElementsByClassName(element, 'pagelinks'); if (pageLinkElements.length > 0) { var pageLinkHrefs = pageLinkElements[0].getElementsByTagName('a'); addCallback(pageLinkHrefs, callbackFunction); } } /** * Add an invocation of the callback function to each link, first modifying the form's action parameters. */ function addCallback(links, callbackFunction) { for (i=0; i < links.length; i++) { links[i].onclick = function() { // Add the display tag parameters to the enclosing <form>'s action addParams(findAncestorElement(this, 'form'), getDisplayTagParams(this.href)) // Invoke the user's function callbackFunction(); return false; } } } /** * Grabs all displaytag-looking parameters from the given href. * Display tag parameters are known to include: * d-<number>-o d-<number>-s d-<number>-p * for sorting and paging. * Returns an array of those parameters */ function getDisplayTagParams(href) { // Use /g to allow repeated exec() calls to find all matches // If we don't use /g, an infinite loop will occur var r = /d-[0-9]+-[osp]=[0-9]+/g; var m; var s = new Array(); var index = 0; RegExp.lasIndex = 0; while ((m = r.exec(href)) != null) { s[index++] = m[0]; } return s; } /** * Adds the given array of parameters (where is is 'name=value') * to the action attribute of the given form element. */ function addParams(formElement, params) { var formAction = formElement.attributes["action"]; for (var i = 0; i < params.length; i++) { formAction.value += ((i == 0 && formAction.value.indexOf("?") < 0) ? "?" : "&") + params[i]; } } /** * Finds the first ancestor of the given element that has the given element name. */ function findAncestorElement(element, tagName) { while (element.parentNode && (!element.tagName || (element.tagName.toUpperCase() != tagName.toUpperCase()))) element = element.parentNode; return element; } /** * Copied from prototype; they implement this on 'document', but not for an arbitrary element. * Returns all elements which are children of the given element that have the given class name. */ function getElementsByClassName(elementRoot, className) { var children = $(elementRoot).getElementsByTagName('*'); var elements = new Array(); for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { elements.push(child); break; } } } return elements; } ------------------------------------------------------- This SF.net email is sponsored by: Splunk Inc. Do you grep through log files for problems? Stop! Download the new AJAX search engine that makes searching your log files as easy as surfing the web. DOWNLOAD SPLUNK! http://ads.osdn.com/?ad_id=7637&alloc_id=16865&op=click _______________________________________________ displaytag-user mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/displaytag-user
