Facebook style pagination

Facebook provides a great API for application developers. An API which helps developers to make their applications more facebook-fit.

There are many things that a developer can do using FBML (Facebook Markup Language), but pagination. Recently I was looking for a way to add Facebook style pagination for one of the Facebook applications being developed. Though there's no relevant FBML tag, we could have something which works out of the box. :)

I found this solution on the Facebook developers forum which looks promising. :) It's a nice php function and anyone can use it to have a exact same Facebook style pagination on their Facebook applications.

The code itself provides many functionalities including mockajax. I could use the original source code with mockajax straight away, but I had to modify it a little bit in-order to add a loading indicator. :)

Here I'll post the modified php code, with mockajax support + a loading indicator, but all credits must go to the developer of the original source code. :)

How to use :

$ajax_top = array('rewriteurl' => $targetpage, 'rewriteid' => 'mypagination', 'rewriteform' => 'mypagination_form', 'loadingimg' => 'spinner');

"'loadingimg' => 'spinner'" will do the trick. You must put an <img> tag with the correspondent id. (here it's 'spinner'). And the image must put inside the 'rewriteid' (div).

<img src="<?=$callback_url?>/loading.gif" id="spinner" style="display:none;"/>

Modified code with the loading indicator :

/**
 * Facebook style paginator
 *
 * @param page the page number (1-based)
 * @param total_items the total amount of items
 * @param limit the amount of items to show per page
 * @param ajax an array with each of clickrewrite[url|id|form]
 * @param url the url the links point to
 * @param query_string the string to be appended to url
 * @param item name the name of items shown in summary
 * @param position whether paginator is on top or bottom of page
 * @return pagination string to be placed in html code
 */
function get_pagination_string(
        $page = 1, 
        $total_items, 
        $limit = 8, 
        $ajax='', 
        $target_page = '', 
        $page_string = '?page=', 
        $summary_name = 'items', 
        $placement = 'summary'
        )
{        
    // DEFAULTS
    $adjacents = 5;

    // HTML
    $div_bar = '<div class="bar clearfix %s_bar">';
    $display = '<div class="summary">Displaying %d-%d of %d %s.</div>';
    $ul = '<ul id="pag_nav_links" class="pagerpro">';
    $link = '<li><a href="%s%s%s">%s</a></li>';
    $current_link = '<li class="current"><a href="%s%s%s">%s</a></li>';
    $ajax_link = '<li><a href="#" clickrewriteurl="%s&page=%s" clickrewriteid="%s" clickrewriteform="%s" clicktoshow="%s">%s</a></li>';
    $current_ajax_link = '<li class="current"><a href="#" clickrewriteurl="%s&page=%s" clickrewriteid="%s" clickrewriteform="%s" clicktoshow="%s">%s</a></li>';
    $ul_close = '</ul>';
    $div_close = '</div>';
    $div_font = '<div style="font-size:11px;">%s</div>';


    // VARS
    if(substr($page_string, 0, 1) != '?') 
        $page_string = '?' . $page_string;
    if(substr($page_string, strlen($page_string) - 5) != 'page=') 
        $page_string .= '&page=';
    $prev = $page - 1;
    $next = $page + 1;
    $firstpage = 1;
    $lastpage = ceil($total_items / $limit);
    $fiop = ($limit * $page) - $limit + 1;
    $liop = min($limit * $page, $total_items);

    // DRAW PAGINATOR 

    // the footer paginator has no summary and the current page has a different gfx
    $type = ($placement == 'summary') ? 'summary' : 'footer';

    $pagination = sprintf($div_bar, $type);

    // Draw summary
    if($placement == 'summary')
        $pagination .= sprintf($display, $fiop, $liop, $total_items, $summary_name);

    if($lastpage > 1)
    {    
        $pagination .= $ul;

        // First page selector
        if ($page > 2) 
        {
            if(!empty($ajax))
            {
                $pagination .= sprintf(
                        $ajax_link,
                        $ajax['rewriteurl'],
                        $firstpage, 
                        $ajax['rewriteid'],
                        $ajax['rewriteform'],
                        $ajax['loadingimg'],
                        'First');
            }
            else
            {
                $pagination .= sprintf(
                        $link, 
                        $target_page, 
                        $page_string, 
                        $firstpage, 
                        'First');
            }
        }

        // Previous page selector
        if ($page > 1) 
        {
            if(!empty($ajax))
            {
                $pagination .= sprintf(
                        $ajax_link,
                        $ajax['rewriteurl'],
                        $firstpage,
                        $ajax['rewriteid'],
                        $ajax['rewriteform'],
                        $ajax['loadingimg'],
                        'Prev');
            }
            else
            {
                $pagination .= sprintf(
                        $link, 
                        $target_page, 
                        $page_string, 
                        $firstpage, 
                        'Prev');
            }
        }

        // Page selectors
        if ($page < 4)
        {    
            for ($counter = 1; $counter <= min(5, $lastpage); $counter++)
            {
                if ($counter == $page)
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $current_ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $current_link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }
                }
                else
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }                  
                }
            }
        }
        elseif ($page > $lastpage - 3)
        {
            for($counter = $lastpage - min(5, $lastpage); 
                    $counter <= $lastpage; 
                    $counter++)
            {
                if ($counter == $page)
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $current_ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $current_link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }                    
                }
                else
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }                    
                }
            }
        }
        else
        {
            for($counter = $page - 2; $counter <= $page + 2; $counter++)
            {
                if ($counter == $page)
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $current_ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $current_link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }                    
                }
                else
                {
                    if(!empty($ajax))
                    {
                        $pagination .= sprintf(
                                $ajax_link,
                                $ajax['rewriteurl'],
                                $counter,
                                $ajax['rewriteid'],
                                $ajax['rewriteform'],
                                $ajax['loadingimg'],
                                $counter);
                    }
                    else
                    {
                        $pagination .= sprintf(
                                $link, 
                                $target_page, 
                                $page_string,
                                $counter,
                                $counter);
                    }                    
                }
            }
        }

        //next button
        if ($page < $lastpage) 
        {

            if(!empty($ajax))
            {
                $pagination .= sprintf(
                        $ajax_link,
                        $ajax['rewriteurl'],
                        $next,
                        $ajax['rewriteid'],
                        $ajax['rewriteform'],
                        $ajax['loadingimg'],
                        'Next');
            }
            else
            {
                $pagination .= sprintf(
                        $link,
                        $target_page,
                        $page_string,
                        $next,
                        'Next');
            }                       

        }

        //last button
        if ($page < $lastpage - 1) 
        {
            if(!empty($ajax))
            {
                $pagination .= sprintf(
                        $ajax_link,
                        $ajax['rewriteurl'],
                        $lastpage,
                        $ajax['rewriteid'],
                        $ajax['rewriteform'],
                        $ajax['loadingimg'],
                        'Last');
            }
            else
            {
                $pagination .= sprintf(
                        $link,
                        $target_page,
                        $page_string,
                        $lastpage,
                        'Last');
            }                   
        }
        $pagination .= $ul_close;
    }

    $pagination .= $div_close;
    $pagination = sprintf($div_font, $pagination);

    return $pagination;
}

Again, all credits go to the developer of the original source code. Thanks a lot for sharing.