Home/ Questions/Q 288527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T05:49:26+00:00

I am currently trying to make the pagination plugin work with my site. When

  • 0

I am currently trying to make the pagination plugin work with my site. When I load the page I get no errors when using firebug, but there are no numbers that displayfor the results. It’s driving bunkers.

Here is the JS file that I am using:

function handlePaginationClick(new_page_index, pagination_container) {
    // This selects 20 elements from a content array
    for(var i=new_page_id;i<3;i++) {
    $('#MyContentArea').append(content[i]);
    }
    return false;
}

// First Parameter: number of items
// Second Parameter: options object
$("#News-Pagination").pagination(122, {
    items_per_page:3, 
    callback:handlePaginationClick
});

Also, I thought you might want the page source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Online Marketing Solutions | Krypton Media</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.pagination.js"></script>
    <script type="text/javascript" src="listing.js"></script>

    <link rel="stylesheet" type="text/css" href="pagination.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
    <div id="login-nav">
        <a href="login.php">Please Login!</a>   </div>
    <div id="top-nav">
    <a href="index.php">Home</a>
        <a href="sites.php">Sites</a>
        <a href="register.php">Sign-Up</a>
        <a href="login.php">Login</a>
        <a href="myac.php">My Account</a>
    </div>

<div id="page-wrap">

<div id="curve-container"></div>
<div id="main-content">
    <div id="article-area">
        <h1>Sites</h1>

    <div id="output-listings">
        <div id="MyContentArea" class="site-listings"> 
<div id="main-info-1" class="maini"> 
 Leftlane News 
 www.leftlanenews.com/ 
 <a id="link-1" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-1" class="mi"> 
                <span class="description">Leftlane News is a leading source for automotive industry and vehicle news. Read by driving enthusiasts, car shoppers, autoworkers, executives, and investors, it is updated throughout the day with the very latest auto news as it happens. No other site brings together the same degree of timeliness, thoroughness and accuracy as Leftlane News.</span> 
 </div> 

<div id="main-info-2" class="maini"> 
 Motor Authority 
 www.motorauthority.com/  
 <a id="link-2" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-2" class="mi"> 
                <span class="description">Motor Authority is a global news source specializing in automotive industry, product and motorsport news with a skew towards high-performance and luxury segments. Motor Authority is always at the forefront of cutting edge and breaking news and provides 24-hour coverage of all the events and happenings in the automotive world.</span> 
 </div> 
<div id="main-info-3" class="maini"> 
 Autoblog 
 http://www.autoblog.com/ 
 <a id="link-3" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-3" class="mi"> 
                <span class="description">Autoblog.com is a web site that offers daily weblogs and podcast news and commentary about automobiles and the automotive industry. It is part of the Weblogs, Inc. network of media sites which is owned by AOL.</span> 
 </div> 

<div id="main-info-4" class="maini"> 
 Cartensity 
 cartensity.com 
 <a id="link-4" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-4" class="mi"> 
                <span class="description">Cartensity is the number one spot to get all your auto needs.</span> 
 </div> 
<div id="main-info-5" class="maini"> 
 Top Gear 
 http://www.topgear.com/us/ 
 <a id="link-5" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-5" class="mi"> 
                <span class="description">Top Gear site with videos, news, features, blogs from Jeremy Clarkson, Richard Hammond and James May, behind-the-scenes info from the show and car reviews.</span> 
 </div> 

<div id="main-info-6" class="maini"> 
 World Car Fans 
 http://www.worldcarfans.com/ 
 <a id="link-6" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-6" class="mi"> 
                <span class="description">Daily updated automotive e-zine, focusing on sports and modified cars. Features photo galleries, forums, editorials, and spy photos.</span> 
 </div> 
<div id="main-info-7" class="maini"> 
 Car and Driver 
 http://www.caranddriver.com/ 
 <a id="link-7" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-7" class="mi"> 
                <span class="description">Our car buying tips help you make informed buying decisions.</span> 
 </div> 

<div id="main-info-8" class="maini"> 
 Yahoo Autos 
 http://autos.yahoo.com/ 
 <a id="link-8" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-8" class="mi"> 
                <span class="description">See new car pictures, find out new car prices and read new car reviews on Yahoo! Autos. Compare cars and get a free price quote from dealers near you.</span> 
 </div> 
<div id="main-info-9" class="maini"> 
 Road and Track 
 http://www.roadandtrack.com/ 
 <a id="link-9" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-9" class="mi"> 
                <span class="description">Road & Track - serving up the most authoritative collection of road tests, future cars, spy shots, auto show coverage, comparison tests, driving impressions</span> 
 </div> 

<div id="main-info-10" class="maini"> 
 Car Advice 
 http://www.caradvice.com.au/ 
 <a id="link-10" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-10" class="mi"> 
                <span class="description">CarAdvice.com.au is Australia�s fastest growing automotive editorial site.Our experienced team leaps at the opportunity to answer reader�s questions and get involved in discussion.The passionate, professional team sets CarAdvice aside from the competition.</span> 
 </div> 
<div id="main-info-11" class="maini"> 
 Car.com 
 http://www.car.com/ 
 <a id="link-11" class="more-info-link" href="#">More info</a> 
</div> 
<div id="more-info-11" class="mi"> 
                <span class="description">Car Reviews, Car Financing, and a Free non-obligation Price Quote on new cars, trucks, suvs. The the Cars.com alternative. Buy or finance your next car</span> 
 </div> 

</div> 
    </div><!--end output-listings-->

    <div id="News-Pagination"> </div>

    </div>
    <div class="clear"></div>
 </div>
<div id="footer"></div>

<div id="curve-container"></div>
<div id="features">
    <div id="p-header">

        <h1></h1>
        <p></p>
    </div>
 </div>
<div id="ft-bottom"></div>
<div id="text-footer"><p>Copyright &copy; 2009. All rights reserved.</p></div>

</div>

</body>

</html>

I only want to display 3 listing per page.

Any help would be great. Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After reading the code and putting it into a file, I noticed that in the code above new_page_id should be new_page_index, from what I gather. Also, content is not defined. Could you perhaps post more code? It seems like it is referencing variables that either don’t exist or are defined elsewhere in the code. I’ll be happy to help once I can get this info.

    UPDATE:

    So the basic problem here is that you were trying use the README examples a little too closely. In the README, content is just an example variable, not an actual built in value to the callback function. To use it with your page, you’ll need to write a bit of code. The basic problem is that you’re trying to pass information from PHP to Javascript. In order to do that correctly, you’ll need to update the PHP file to also handle the inline Javascript and have it spit out some statement like:


    $("#News-Pagination").pagination(<?php echo $NUM_OF_ARTICLES ?>,(
    items_per_page:20,
    callback:handlePaginationClick
    )
    );

    Where NUM_OF_ARTICLES is the number of articles that you fetch from the database. You could get this number by incrementing a variable in your “while($row = $result->fetch_object()) { $id = $row->id; ...” loop.

    Also, the default object containing the div you want to append the data to is given as an argument to the callback, i.e. $(pagination_container) is $("#News-Pagination"), so you don’t need to get it with a DOM selector again.

    Finally, and this is the hard part, you need to scan all the previously entered text from the DOM into a JavaScript array.

    BUT

    Here’s one way you could do it all in JS, and it is NOT the best way, but the quickest for now: 

    // make them global to access them from the console and use them
// in handlePaginationClick
var maini_s;
var mi_s;
var num_of_arts;
var ipp;

function handlePaginationClick(new_page_index, pagination_container) {
    var pc = $(pagination_container);
    pc.children('div.maini').remove();
    pc.children('div.mi').remove();
    for(var i=new_page_index*ipp; i < (new_page_index+1)*ipp ;i++) {
        if (i < num_of_arts) {
            pc.append(maini_s[i]).append(mi_s[i]);
        }
    }
    return false;
}

$(document).ready(function() {
    maini_s = $('div.maini').remove();
    mi_s = $('div.mi').remove();
    num_of_arts = maini_s.length;
    ipp = 3;

    // First Parameter: number of items
    // Second Parameter: options object
    $("#News-Pagination").pagination(11, {
        items_per_page:ipp, 
        callback:handlePaginationClick
    });
});
    • 0