Single Article

Sort shuttle values using jQuery

Category APEX and jQuery

I have previously blog about Shuttle sides label and hide sort buttons with jQuery.

Here is how you can enhance side labels to sort shuttle values.

 

If you are on APEX 3.x you need load jQuery library on page HTML header.

Add to page HTML header:

<script type="text/javascript">
(function($){
 $.fn.sortSelectOptions=function(pOrder){
  return this.each(function(i){
   var self=$(this);
   var options=self.children("option").detach();
   options.sort(function(a,b){
    a=a.firstChild.nodeValue; 
    b=b.firstChild.nodeValue;
    if(a==b){
     return 0;
    } 
    if(pOrder=="desc"){
     return (a<b)?1:-1; 
    }
    return (a>b)?1:-1; 
   });
   self.append(options);
  });
 }
})(jQuery);
</script>

Code for sorting option values are taken from rickyrosario blog.

 

Then add to your shuttle item Post Element Text:

<script type="text/javascript">
$(function(){
 $("<div/>",{
  "class":"fielddatabold",
  "css":{"cursor":"pointer"},
  "text":"Not Selected"
 })
 .insertBefore("##CURRENT_ITEM_NAME#_LEFT")
 .append(
  $("<img/>",{
   "css":{"vertical-align":"middle"}
  })
  .attr({
   "title":"Sort Descending",
   "alt":"Sort Descending",
   "src":"#IMAGE_PREFIX#ws/ddown.gif"
  })
 )
 .toggle(
  function(){
   $("##CURRENT_ITEM_NAME#_LEFT").sortSelectOptions("desc");
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/dup.gif",
    "title":"Sort Ascending",
    "alt":"Sort Ascending"
   });
  },function(){
   $("##CURRENT_ITEM_NAME#_LEFT").sortSelectOptions();
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/ddown.gif",
    "title":"Sort Descending",
    "alt":"Sort Descending"
   });
  }
 );

 $("<div/>",{
  "class":"fielddatabold",
  "css":{"cursor":"pointer"},
  "text":"Selected"
 })
 .insertBefore("##CURRENT_ITEM_NAME#_RIGHT")
 .append(
  $("<img/>",{
   "css":{"vertical-align":"middle"}
  })
  .attr({
   "title":"Sort Descending",
   "alt":"Sort Descending",
   "src":"#IMAGE_PREFIX#ws/ddown.gif"
  })
 )
 .toggle(
  function(){
   $("##CURRENT_ITEM_NAME#_RIGHT").sortSelectOptions("desc");
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/dup.gif",
    "title":"Sort Ascending",
    "alt":"Sort Ascending"
   });
  },function(){
   $("##CURRENT_ITEM_NAME#_RIGHT").sortSelectOptions();
   $(this).find("img").attr({
    "src":"#IMAGE_PREFIX#ws/ddown.gif",
    "title":"Sort Descending",
    "alt":"Sort Descending"
   });
  }
 );

});
</script>

See working example.

 

Check also relating post in OTN forum.

Comments

No comments yet on this article.

Global Right Column

Search

Archives

Subscribe in a Reader