1 // Javascript pagination control

     2 

     3 /**

     4  * Paginates an array of data.

     5  * @param array List of objects to render

     6  * @param function Function called on each member of the array to render, should take an array member and set this.html to a string

     7  * @param int Optional. Object to start at, defaults to 0.

     8  * @param int Optional. Objects per page, defaults to 10

     9  * @param object Variable that will be passed to the renderer callback

    10  */

    11  

    12 var pagin_objects = new Object();

    13 

    14 function paginator(data, callback, offset, perpage, passer)

    15 {

    16   if ( !perpage || typeof(perpage) != 'number' || ( typeof(perpage) == 'number' && perpage < 1 ) )

    17   {

    18     this.perpage = 10;

    19   }

    20   else

    21   {

    22     this.perpage = perpage;

    23   }

    24   if ( typeof(offset) != 'number' )

    25     this.offset = 0;

    26   else

    27     this.offset = offset;

    28   if ( typeof(passer) != 'undefined' )

    29     this.passer = passer;

    30   else

    31     this.passer = false;

    32   this.num_pages = Math.ceil(data.length / perpage );

    33   this.random_id = 'autopagin_' + Math.floor(Math.random() * 1000000);

    34   this._build_control = _build_paginator;

    35   if ( this.num_pages > 1 )

    36   {

    37     var pg_control = '<div class="'+this.random_id+'_control">'+this._build_control(0)+'</div>';

    38   }

    39   else

    40   {

    41     var pg_control = '';

    42   }

    43   this.html = pg_control;

    44   var i = 0;

    45   while ( i < data.length )

    46   {

    47     if ( i % this.perpage == 0 )

    48     {

    49       if ( i > 0 )

    50         this.html += '</div>';

    51       var display = ( ( i * this.perpage ) == this.offset ) ? '' : 'display: none;';

    52       var thispage = Math.floor(i / this.perpage);

    53       this.html += '<div id="' + this.random_id + '_' + thispage + '" style="' + display + '">';

    54     }

    55     this.html += callback(data[i], this.passer);

    56     i++;

    57   }

    58   this.html += '</div>';

    59   this.html += pg_control;

    60   pagin_objects[this.random_id] = this;

    61 }

    62 

    63 function _build_paginator(this_page)

    64 {

    65   var begin = '<div class="tblholder" style="display: table; margin: 10px 0 0 auto;"><table border="0" cellspacing="1" cellpadding="4"><tr><th>Page:</th>';

    66   var block = '<td class="row1" style="text-align: center;">{LINK}</td>';

    67   var end = '</tr></table></div>';

    68   var blk = new templateParser(block);

    69   var inner = '';

    70   var cls = 'row2';

    71   

    72   if ( this.offset > 0 )

    73   {

    74     var url = '#';

    75     var link = "<a href=\""+url+"\" style='text-decoration: none;'>&laquo; Prev</a>";

    76     cls = ( cls == 'row1' ) ? 'row2' : 'row1';

    77     blk.assign_vars({

    78         CLASS: cls,

    79         LINK: link

    80       });

    81     inner += blk.run();

    82   }

    83   if ( this.num_pages < 5 )

    84   {

    85     for ( var i = 0; i < this.num_pages; i++ )

    86     {

    87       cls = ( cls == 'row1' ) ? 'row2' : 'row1';

    88       var url = '#';

    89       var j = i + 1;

    90       var link = ( i == this_page ) ? "<b>"+j+"</b>" : "<a href=\""+url+"\" onclick=\"jspaginator_goto('"+this.random_id+"', "+i+"); return false;\" style='text-decoration: none;'>"+j+"</a>";

    91       blk.assign_vars({

    92           CLASS: cls,

    93           LINK: link

    94         });

    95       inner += blk.run();

    96     }

    97   }

    98   else

    99   {

   100     if ( this_page + 5 > this.num_pages )

   101     {

   102       var list = new Array();

   103       var tp = this_page;

   104       if ( this_page + 0 == this.num_pages ) tp = tp - 3;

   105       if ( this_page + 1 == this.num_pages ) tp = tp - 2;

   106       if ( this_page + 2 == this.num_pages ) tp = tp - 1;

   107       for ( var i = tp - 1; i <= tp + 1; i++ )

   108       {

   109         list.push(i);

   110       }

   111     }

   112     else

   113     {

   114       var list = new Array();

   115       var current = this_page;

   116       var lower = ( current < 3 ) ? 1 : current - 1;

   117       for ( var i = 0; i < 3; i++ )

   118       {

   119         list.push(lower + i);

   120       }

   121     }

   122     var url = '#';

   123     var link = ( 0 == this.offset ) ? "<b>First</b>" : "<a href=\""+url+"\" style='text-decoration: none;'>&laquo; First</a>";

   124     blk.assign_vars({

   125         CLASS: cls,

   126         LINK: link

   127       });

   128     inner += blk.run();

   129 

   130     // if ( !in_array(1, $list) )

   131     // {

   132     //   $cls = ( $cls == 'row1' ) ? 'row2' : 'row1';

   133     //   $blk->assign_vars(array('CLASS'=>$cls,'LINK'=>'...'));

   134     //   $inner .= $blk->run();

   135     // }

   136 

   137     for ( var k in list )

   138     {

   139       var i = list[k];

   140       if ( i == this.num_pages )

   141         break;

   142       cls = ( cls == 'row1' ) ? 'row2' : 'row1';

   143       var offset = i * this_page;

   144       var url = '#';

   145       var j = i + 1;

   146       var link = ( offset == this.offset ) ? "<b>"+j+"</b>" : "<a href=\""+url+"\" style='text-decoration: none;'>"+j+"</a>";

   147       blk.assign_vars({

   148           CLASS: cls,

   149           LINK: link

   150         });

   151       inner += blk.run();

   152     }

   153 

   154     var total = num_pages * perpage - perpage;

   155 

   156     if ( this_page < this.num_pages )

   157     {

   158       // $cls = ( $cls == 'row1' ) ? 'row2' : 'row1';

   159       // $blk->assign_vars(array('CLASS'=>$cls,'LINK'=>'...'));

   160       // $inner .= $blk->run();

   161 

   162       cls = ( cls == 'row1' ) ? 'row2' : 'row1';

   163       var url = '#';

   164       var j = i + 1;

   165       var link = ( total == this.offset ) ? "<b>Last</b>" : "<a href=\""+url+"\" style='text-decoration: none;'>Last &raquo;</a>";

   166       blk.assign_vars({

   167           CLASS: cls,

   168           LINK: link

   169         });

   170       inner += blk.run();

   171     }

   172 

   173   }

   174 

   175   if ( this.offset < total )

   176   {

   177     var url = '#page_' + abs(this.offset + this.perpage);

   178     var link = "<a href=\""+url+"\" style='text-decoration: none;'>Next &raquo;</a>";

   179     cls = ( cls == 'row1' ) ? 'row2' : 'row1';

   180     blk.assign_vars({

   181           CLASS: cls,

   182           LINK: link

   183         });

   184       inner += blk.run();

   185   }

   186 

   187   inner += '<td class="row2" style="cursor: pointer;" onclick="paginator_goto(this, '+this_page+', '+this.num_pages+', '+this.perpage+', {js: true, random_id: \''+this.random_id+'\'});">&darr;</td>';

   188 

   189   var paginator = "\n"+begin+inner+end+"\n";

   190   return paginator;

   191   

   192 }

   193 

   194 function jspaginator_goto(pagin_id, jump_to)

   195 {

   196   var theobj = pagin_objects[pagin_id];

   197   for ( var i = 0; i < theobj.num_pages; i++ )

   198   {

   199     var display = ( i == jump_to ) ? 'block' : 'none';

   200     var thediv = document.getElementById(pagin_id + '_' + i);

   201     if ( thediv )

   202       thediv.style.display = display;

   203   }

   204   var pg_control = theobj._build_control(jump_to);

   205   var divs = getElementsByClassName(document, 'div', pagin_id + '_control');

   206   for ( var i = 0; i < divs.length; i++ )

   207   {

   208     divs[i].innerHTML = pg_control;

   209   }

   210 }

   211 

   212 function paginator_goto(parentobj, this_page, num_pages, perpage, url_string)

   213 {

   214   var height = $(parentobj).Height();

   215   var width  = $(parentobj).Width();

   216   var left   = $(parentobj).Left();

   217   var top    = $(parentobj).Top();

   218   var left_pos = left + width ;

   219   var top_pos = height + top;

   220   var div = document.createElement('div');

   221   div.style.position = 'absolute';

   222   div.style.top = top_pos + 'px';

   223   div.className = 'question-box';

   224   div.style.margin = '1px 0 0 2px';

   225   var vtmp = 'input_' + Math.floor(Math.random() * 1000000);

   226   var regex = new RegExp('\"', 'g');

   227   var submit_target = ( typeof(url_string) == 'object' ) ? ( toJSONString(url_string) ).replace(regex, '\'') : 'unescape(\'' + escape(url_string) + '\')';

   228   var onclick = 'paginator_submit(this, '+num_pages+', '+perpage+', '+submit_target+'); return false;';

   229   div.innerHTML = 'Go to page:<br /><input type="text" size="2" style="padding: 1px; font-size: 8pt;" value="'+(parseInt(this_page)+1)+'" id="'+vtmp+'" />&emsp;<a href="#" onclick="'+onclick+'" style="font-size: 14pt; text-decoration: none;">&raquo;</a>&emsp;<a href="#" onclick="fly_out_top(this.parentNode, false, true); return false;" style="font-size: 14pt; text-decoration: none;">&times;</a>';

   230   

   231   var body = document.getElementsByTagName('body')[0];

   232   domObjChangeOpac(0, div);

   233   

   234   body.appendChild(div);

   235   

   236   document.getElementById(vtmp).onkeypress = function(e){if(e.keyCode==13)this.nextSibling.nextSibling.onclick();};

   237   document.getElementById(vtmp).focus();

   238   

   239   // fade the div

   240   /*

   241   if(!div.id) div.id = 'autofade_'+Math.floor(Math.random() * 100000);

   242   var from = '#33FF33';

   243   Fat.fade_element(div.id,30,2000,from,Fat.get_bgcolor(div.id));

   244   */

   245   

   246   fly_in_bottom(div, false, true);

   247   

   248   var divh = $(div).Width();

   249   left_pos = left_pos - divh;

   250   div.style.left = left_pos + 'px';

   251 }

   252 

   253 function paginator_submit(obj, max, perpage, formatstring)

   254 {

   255   var userinput = obj.previousSibling.previousSibling.value;

   256   userinput = parseInt(userinput);

   257   var offset = ( userinput - 1 ) * perpage;

   258   if ( userinput > max || isNaN(userinput) || userinput < 1 )

   259   {

   260     new messagebox(MB_OK|MB_ICONSTOP, 'Invalid entry', 'Please enter a page number between 1 and ' + max + '.');

   261     return false;

   262   }

   263   if ( typeof(formatstring) == 'object' )

   264   {

   265     fly_out_top(obj.parentNode, false, true);

   266     jspaginator_goto(formatstring.random_id, ( offset / perpage ));

   267   }

   268   else

   269   {

   270     var url = sprintf(formatstring, String(offset));

   271     fly_out_top(obj.parentNode, false, true);

   272     window.location = url;

   273   }

   274 }

   275