Question

This is my first post, but I’ve been using the site for years. However, I’m stuck on what should be a fairly simple problem with pagination. I have a group of links being populated with php,

function create_pagination($page,$echo=false)
  {
    $max_rows = isset($_SESSION['maxListViewRows']) ? $_SESSION['maxListViewRows'] : 15;
    $total_rows = isset($_SESSION['total_rows']) ? $_SESSION['total_rows'] : 1;
    $pages = ceil($total_rows / $max_rows);

    if( $page > $pages) $page = $pages;

    $start_row = $page == 1 ? 1 : ( ($page - 1) * $max_rows ) + 1;

    $rows_disp = ($start_row + $max_rows) <= $total_rows ? ($start_row + $max_rows) - 1 : $total_rows;

    $facility_number_summary = 'Showing ' . $start_row .  ' - ' . $rows_disp  . ' of ' . $total_rows . ' rows.<br /> <p class="carapg">(MESSAGE IRRELEVANT TO THE QUESTION)</p>';

    $pagination_functions = '';

    for($i = 1; $i <= $pages; $i++)
    {
        $pagination_functions.= $i != $page ? '<a href="javascript:void(0);" id="page_' . $i . '" class="page_link">' . $i . '</a>'
                                      : '<span class="page_link" id="page_' . $i . '">' . $i . '</span>';
    }

    $results =  array('facility_number_summary'=>$facility_number_summary, 'pagination_functions'=>$pagination_functions);

    $returned = '<div id="max_left">'  . $results['facility_number_summary'] . '</div>
                 <div id="max_right">' . $results['pagination_functions'] . '</div>
                 <div class="break"></div>';

    if( $echo ){ echo $returned; return; }

    return $returned;
  }

And after that, I parse the div with jquery and compress them.

function draw_pagination(page)
{
if(page == undefined){
    page = 1;
}
var postData = {  'ajax' : 'pagination',
                  'page' : page              };

$.ajax({

    type : "POST",

    url  : "/ajax/account.php",

    data : postData,

    success : 
        function(data){ 
            $("#fac_results_max").html(data);   
            get_page_count();
        }

});

}

function get_page_count()
{
var count = $("#max_right").children().length;

if( count < 11 )
    return;

var content = '';
var spacer  = false;

$("#max_right").children().each(
    function(index)
    {
        if( $(this).html() > 5 && $(this).html() <= ( count - 5 )  )
        {
            $(this).css('display','none');
            if( !spacer )
            {
                content += '...';
                spacer = true;
            }
        }
        else
        {
            content += $(this).html();
        }
    }
);  

$("#max_right").html(content);  
}

I am going to take the elements that are hidden and append them to a div that drops down so that the user can select from them. The problem I’m having is the

content += $(this).html() 

It is only returning the inside of the html, as I expect it to, but I don’t know what to call on it to return the actual html of the entire element referred to by ‘this’. Sorry if it’s a dumb question, but I’m stumped.

Thanks in advance for your responses.

Answer 1

Try this:

content += $(this).clone().wrap('<div>').parent().html();

AFAIK, there exists no nice way to get the contents AND the tags of the element using jQuery, so instead we clone the element, wrap it in <div> tags, bump up to the parent (the <div>) and then get its html.