jquery Paginierung funktioniert nicht

Ich versuche derzeit, das pagination Plugin mit meiner Website arbeiten zu lassen. Wenn ich die Seite lade, erhalte ich bei der Verwendung von Firebug keine Fehler, aber für die Ergebnisse werden keine Zahlen angezeigt. Es fährt Bunker.jquery Paginierung funktioniert nicht

Hier ist die JS-Datei, die ich verwende:

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 
});

Auch ich dachte, Sie könnten die Seite Quelle wollen:

<!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>

ich nur 3 Eintrag pro Seite angezeigt werden sollen.

Jede Hilfe wäre großartig. Vielen Dank.

Quelle

2009-07-20 Spyderfusion02

Ist es in einer Doc-Ready-Funktion? – redsquare

gerade die ready-Funktion hinzugefügt und die Nummern jetzt angezeigt, aber ich bekomme diesen Fehler in Firebug -> new_page_id ist nicht definiert [Break auf diesen Fehler] für (var i = new_page_id; i <3; i ++) {<- Wer weiß was das bedeutet? – Spyderfusion02

Nach dem Lesen des Codes und das Einfügen in eine Datei, habe ich festgestellt, dass in dem Code über new_page_id sollte new_page_index sein, von dem, was ich sammeln. Außerdem ist content nicht definiert. Könnten Sie vielleicht mehr Code posten? Es scheint, als ob es Variablen referenziert, die entweder nicht existieren oder an anderer Stelle im Code definiert sind. Ich werde glücklich sein zu helfen, sobald ich diese Informationen bekommen kann.

UPDATE:

Also hier das Grundproblem ist, dass Sie die README examples ein wenig zu eng nutzen versuchten. In der README-Datei ist content nur eine Beispielvariable, kein tatsächlich eingebauter Wert für die Callback-Funktion. Um es mit Ihrer Seite zu verwenden, müssen Sie ein wenig Code schreiben. Das grundlegende Problem besteht darin, dass Sie versuchen, Informationen von PHP an Javascript weiterzugeben. Um das richtig zu tun, müssen Sie die PHP-Datei zu aktualisieren, um auch die Inline-Javascript handhaben und haben es ausspucken einige Aussage wie:

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

Wo NUM_OF_ARTICLES die Anzahl der Artikel, die Sie holen aus der Datenbank. Sie können diese Zahl erhalten, indem Sie eine Variable in Ihrer "while($row = $result->fetch_object()) { $id = $row->id; ..." -Schleife inkrementieren.

Auch das Standardobjekt mit dem div Sie die Daten anhängen möchten, wird als Argument an die Callback gegeben, das heißt $(pagination_container)ist$("#News-Pagination"), so dass Sie es nicht wieder mit einem DOM Wähler erhalten müssen.

Schließlich, und das ist der schwierige Teil, müssen Sie alle zuvor eingegebenen Text aus dem DOM in ein JavaScript-Array scannen.

ABER

Hier ein so, wie Sie es alle in JS tun könnten, und es ist nicht der beste Weg, aber die schnellste jetzt:

// 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 
    }); 
});

Quelle

2009-07-20 19:49:04 daveslab

Ich änderte die new_page_id zu new_page_index und das wurde der Fehler von Firebug los, aber wenn ich auf die Zahlen klicken sie nichts tun, Sie ändern nur Klick-Status als aktiv und nicht aktiv. – Spyderfusion02

Danke für die ausführliche Erklärung, ich schätze es wirklich. Ich bin ein wenig unsicher, was ich meiner PHP-Datei hinzufügen soll. Erstelle ich eine Variable, die die Anzahl der Artikel in der Datenbank zählt und diese dann in die js-Datei aufnimmt? – Spyderfusion02

Sie sollten nichts in Ihrem PHP ändern müssen. Ich habe dies auf dem statischen HTML-Code getan, den Sie zuvor gepostet haben, und es hat funktioniert. Dies ist eine reine JS-Lösung. Die ursprünglichen Dinge, die ich gepostet habe, sind nur relevant, wenn du es in PHP machen willst. Es hängt davon ab, mit was du dich wohl fühlst. Funktioniert es jetzt für dich oder nicht? – daveslab

Neben dem obigen Code Der Ergebnisse werden durch eine pHP-Datei erstellt und zeigt dann auf der Hauptseite in einem div ‚output-Listings‘ genannt

Hier ist die Datei (buy.functions.php):

<?php 
function outputListingsTable() 
{ 
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead'); 
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error); 

if($result) 
{ 
     echo "<div id=\"MyContentArea\" class=\"site-listings\"> \n"; 
           while($row = $result->fetch_object()) 
           { 
             $id = $row->id; 
             $siteName = $row->site_name; 
             $siteDescription = $row->site_description; 
             $siteURL = $row->site_url; 
             $sitePrice = $row->site_price; 

             echo "<div id=\"main-info-" .$id. "\" class=\"maini\"> \n"; 
             echo " " . $siteName . " \n"; 
             echo " " . $siteURL . " \n"; 
             echo " <a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a> \n";  
             echo "</div> \n"; 

         echo "<div id=\"more-info-" .$id. "\" class=\"mi\"> \n"; 
           //echo "   <div id=\"details\" class=\"more-information\">"; 
           echo "    <span class=\"description\">" . $siteDescription . "</span> \n"; 
           //echo "   </div> \n";   
         echo " </div> \n"; 
           } 
echo "</div> \n";   

    } 

} 

?>

Wie Sie sehen können, habe ich die #MyContentArea Div durch diese Datei. Ich bin mir nicht sicher, ob dies der richtige Ort dafür ist.

ist die vollständige JS-Datei (listing.js):

$(document).ready(function() { 
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(11, { 
    items_per_page:3, 
    callback:handlePaginationClick 
}); 
});

so ziemlich ist der gesamte Code beteiligt. Brauchen Sie die Plugin-Dateien?

Auch hier ist die Readme-Datei: README

Quelle

2009-07-20 20:07:29 Spyderfusion02

Versuchen function handlePaginationClick() außerhalb von $(document).ready() setzen.

Funktionen sollten eigentlich nicht in $(document).ready() eingebettet werden, es sei denn, es gibt einen Grund, sie dort zu haben. Wenn sie im globalen Geltungsbereich bleiben, werden oft Probleme für mich beseitigt.

EDIT:$("#News-Pagination").pagination() jedoch, wenn ich mich nicht täusche, innen $(document).ready() sein sollte, da es eine Funktion aufruft.

Auch new_page_id ist nirgendwo definiert. Woher kommt es?

Quelle

2009-07-20 20:53:41

Versucht, diese Funktion außerhalb der fertigen Fn zu setzen, aber nichts schien zu passieren. wo hast du die edit_page_id gesehen? oder redest du von der new_page_id? – Spyderfusion02

Entschuldigung, korrigiert. Ja, es sieht so aus, als ob Sie auf eine undefinierte Variable verweisen. Angenommen, dies ist alles Ihr Code, denke ich, dass 'for (var i = new_page_id; i <3; i ++)' das Äquivalent zu 'for (var i = undefined; i <3; i ++)' bedeutet –

jquery Paginierung funktioniert nicht

Antwort

Verwandte Themen