[ 5 posts ]

Kai Schwarz

  • Username: papakai
  • Joined: Fri Nov 13, 2009 8:26 am
  • Posts: 301
  • Location: Germany
  • Offline
  • Profile
Tags:

Customize standard paginator elements

Post Posted: Wed Feb 02, 2011 7:01 pm
+0-
Hi together,

I hope anyone did this already: whats the easiest way implementing first-/last-/next-/previouspagelink as yahoo buttons and rowsperpage-dropdown as kind of menu button.

Many thanks for your help and ideas!

Regards
- Kai

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: Customize standard paginator elements

Post Posted: Thu Feb 03, 2011 4:06 am
+0-
Hello Kai.

Do you intend anything similar to "DataTable Control: Complex Example of Multiple Features" example [1]? Or do you intend the paginator links as kind of menu button and not as pure links?

I think you may customize 'containers' or 'template' configuration attribute.

My two cents,
Alberto

[1] http://developer.yahoo.com/yui/examples ... mplex.html

Kai Schwarz

  • Username: papakai
  • Joined: Fri Nov 13, 2009 8:26 am
  • Posts: 301
  • Location: Germany
  • Offline
  • Profile

Re: Customize standard paginator elements

Post Posted: Thu Feb 03, 2011 4:45 am
+0-
Quote:
Or do you intend the paginator links as kind of menu button and not as pure links?


^ ^ this is what I am searching for.

I already have a kind of solution, functional but worse I think.

Quote:
I think you may customize 'containers' or 'template' configuration attribute.


any examples? what you mean? The following was my solution (subscribed renderEvent):

Code:
var myConts = this.paginator.getContainerNodes(), el2, i, html, x, bttn, el, newEl, els, classes = ["yui-pg-first", "yui-pg-previous", "yui-pg-next", "yui-pg-last"];
:
:
for (i=0;i<myConts.length;i++){
   for (x=0;x<classes.length;x++){
      els = YAHOO.util.Dom.getElementsByClassName(classes[x], "*", myConts[i]);
      els = (els.length!==undefined?els[0]:els);
      el = new YAHOO.util.Element(myConts[i]);
      newEl = document.createElement('a');
      newEl.id = els.id;
      newEl.className = els.className;
      newEl.href = 'javascript:;';
      newEl.innerHTML = els.innerHTML;                     
      el.replaceChild(newEl, els);
      els = newEl;
      bttn = new YAHOO.widget.Button(els.id);
      switch(classes[x]){
         case classes[0]: bttn.on("click", this.paginatorFirstPage, this.paginator, true); break;
         case classes[1]: bttn.on("click", this.paginatorPrevPage, this.paginator, true); break;
         case classes[2]: bttn.on("click", this.paginatorNextPage, this.paginator, true); break;
         case classes[3]: bttn.on("click", this.paginatorLastPage, this.paginator, true); break;
      }                           
   }
}


this.paginator<type>Page are functions that are implemented like in the paginator module to set an explicit page.

Alberto Santini

YUI Contributor

  • Offline
  • Profile

Re: Customize standard paginator elements

Post Posted: Thu Feb 03, 2011 4:59 am
+0-
Hello Kai.

Thanks for sharing the code.
Now I see the point.

I was wondering if it is possible to customize "template" configuration attribute as

template : "{PreviousPageLink} <strong>{CurrentPageReport}</strong> {NextPageLink}"

inserting html fragments to render a button.

Or using "containers" configuration attribute referring to an existing markup, using buttons.

Some ideas to simplify your code, but I didn't try that.

Regards,
Alberto

Kai Schwarz

  • Username: papakai
  • Joined: Fri Nov 13, 2009 8:26 am
  • Posts: 301
  • Location: Germany
  • Offline
  • Profile

Re: Customize standard paginator elements

Post Posted: Thu Feb 03, 2011 5:08 am
+0-
I am already using this both things.

containers: simply div-containers where the whole paginator gets rendered into. so doesnt help here.

template: yes i can add specific html, but the point is, that Paginator-Links are <a> or <span> elements (activated or inactivated). Having a <span> element makes it impossible to add corresponding html code to build up a button from dom.

Thats what I already thought about :-)
  [ 5 posts ]
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