*
*
*
*
*
*
*
*
*
* yadda yadda yadda
* yadda yadda yadda
*
*
*
*
* @todo Make sure that tables and respective rows paginate under all
* circumstances
*
* Notes
* + Be sure to style (using css) your navigation DIV (or other appropriate container)
*
* Milestones
* + initial revision
*/
/**
* @param contain_id string id attribute of the container tag
* @param seperator_tag string type of tag to seperate pieces to
* paginate by (i.e. 'p', 'div', etc..)
* @param nav_id strong id attribute of the navigation container
* (a 'div','p', etc...)
* @param page_size int number of seperator tags for each page
* @param curr_page int the current page
*/
function paginate( container_id, seperator_tag, nav_id, page_size, curr_page )
{
seperator_tag = seperator_tag.toLowerCase();
// special case for table
if( seperator_tag.toLowerCase() == 'tr' )
{
var container = document.getElementById( container_id );
for( var i=0; i < container.childNodes.length; ++i )
{
if( container.childNodes[i].nodeName.toLowerCase() == 'tbody' )
{
var children = container.childNodes[i].childNodes;
break;
}
}
}
else
var children = document.getElementById( container_id ).childNodes;
var num_displayed = 0; // keep track of how many we've already displayed
// keep track of total number of seperator_tags there are, since
// container_id also contains text nodes and whatnot.
var total_children = 0;
for( var i=0; i < children.length; i++ )
{
var child = children[i];
if( child.nodeName.toLowerCase() == seperator_tag )
{
if( ( total_children < curr_page * page_size ) ||
( total_children > curr_page * page_size + ( page_size - 1 ) )
)
child.style.display = 'none';
else
child.style.display = '';
++total_children;
}
}
generateMenu( Math.ceil( total_children / page_size ),
container_id, seperator_tag, nav_id, page_size, curr_page );
return false;
}
/**
* Create a selection menu to display which page, based on total
* number of our seperator tags
*
* @param total_pages total number of pages that make up our pagination
* @param contain_id string id attribute of the container tag
* @param seperator_tag string type of tag to seperate pieces to
* paginate by (i.e. 'p', 'div', etc..)
* @param nav_id strong id attribute of the navigation container
* (a 'div','p', etc...)
* @param page_size int number of seperator tags for each page
* @param curr_page int the current page
* @todo Would it be better to replace innerHTML w/ node creation?
*/
function generateMenu( total_pages, container_id, seperator_tag, nav_id, page_size, curr_page )
{
var navigation_div = document.getElementById( nav_id );
var tmp_html = '';
for( var i = 0; i < total_pages; i++ )
{
tmp_html += "" + (i+1) + "" +
( ( i+1 == total_pages ) ? "" : " - " );
}
navigation_div.innerHTML = tmp_html;
}