jqueryページネーションが動作しない

現在、私のサイトでpaginationプラグインを動作させようとしています。ページをロードすると、ファイヤーバグを使用してもエラーは表示されませんが、結果を表示する番号はありません。それはバンカーを運転している。jqueryページネーションが動作しない

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

はまた、私はあなたがページのソースを望むかもしれないと思った：私は1ページあたり3一覧を表示したい

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

は、ここで私が使用していますJSファイルです。

助けがあれば助かります。ありがとうございました。

出典

2009-07-20 Spyderfusion02

docレディ機能の中にありますか？ – redsquare

はready関数を追加したばかりですが、数値は表示されますが、firebugでこのエラーが発生します - > new_page_idが定義されていません {var i = new_page_id; i <3; i ++）{< - 誰でもこれが何を意味するか知っていますか？ – Spyderfusion02

コードを読み込んでファイルに入れた後、私は上記のコードでnew_page_idがnew_page_indexであることに気づいた。また、contentは定義されていません。あなたはおそらくもっとコードを投稿できますか？それは、存在しないか、コードの他の場所で定義されている変数を参照しているようです。私はこの情報を得ることができたら喜んでお手伝いします。

UPDATE：

そこでここでは基本的な問題は、あなたが少しあまりにも密接にREADME examplesを使用しようとしていたということです。 READMEでは、contentは実際のコールバック関数の値ではなく、変数の例です。あなたのページでそれを使用するには、少しのコードを書く必要があります。基本的な問題は、PHPからJavascriptに情報を渡そうとしていることです。

NUM_OF_ARTICLESはあなたがフェッチ記事の数です

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

：正しくそれを行うために、あなたはまた、インラインJavascriptを処理するために、それはのようないくつかの文を吐き出すているPHPファイルを更新する必要がありますデータベースから。 "while($row = $result->fetch_object()) { $id = $row->id; ..."ループ内の変数をインクリメントすることでこの数値を得ることができます。

また、あなたがデータを追加したいのdivを含むデフォルトのオブジェクトは、あなたが再びDOMセレクタでそれを取得する必要はありませんので、すなわち$(pagination_container)は、$("#News-Pagination")あり、コールバックへの引数として指定されています。

最後に、これは難しい部分です。以前に入力したすべてのテキストをDOMからJavaScript配列にスキャンする必要があります。

しかし

ここでは、JSでそれをすべて行うことができ1つの方法だし、それが最善の方法ではありませんが、今のところ最速：上記のコードに加えて

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

出典

2009-07-20 19:49:04 daveslab

私はnew_page_idをnew_page_indexに変更しました。これはfirebugからのエラーを取り除きましたが、何もしない数字をクリックすると、クリック状態はアクティブでアクティブではなく変更されます。 – Spyderfusion02

詳細な説明をいただき、ありがとうございます。私は少し私のPHPファイルに追加するには不明です。私はdb内の記事の数を数える変数を作成し、それをjsファイルに組み込みますか？ – Spyderfusion02

PHPで何も変更する必要はありません。以前に投稿した静的なHTMLでこれを行いました。これは純粋にJSソリューションです。私が投稿したオリジナルのものは、PHPでやりたければ関連性があります。それはあなたが快適であるかどうかによって異なります。それはあなたのために今働いているのですか？ – daveslab

結果はPHPファイルから作成され、メインページのdivに出力リストと表示されます

ここにファイル（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";   

    } 

} 

?>

ご覧のとおり、#MyContentArea divをこのファイルに挿入します。これが正しい場所かどうかは分かりません。

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

ほとんど関与するすべてのコードです：ここで

は、完全なJSファイル（listing.js）です。あなたはプラグインファイルが必要ですか？ README

出典

2009-07-20 20:07:29 Spyderfusion02

$(document).ready()のfunction handlePaginationClick()外を入れてみてください：

また、ここではreadmeファイルです。

何らかの理由がない限り、関数は実際には$(document).ready()の内部に埋め込まれてはいけません。それらをグローバルスコープに保持すると、しばしば私にとって問題がなくなります。

EDIT：$("#News-Pagination").pagination()私は間違っていないよ場合には、関数を呼び出すされているので、しかし、、、$(document).ready()内にある必要があります。

また、new_page_idはどこにも定義されていません。それはどこから来ていますか？

出典

2009-07-20 20:53:41

この関数を準備関数fnの外に置こうとしましたが、何も起こりそうにありませんでした。 edit_page_idはどこにありますか？またはあなたはnew_page_idについて話していますか？ – Spyderfusion02

申し訳ありませんが修正されました。はい、未定義の変数を参照しているようです。これはあなたのコードであると仮定して、for（var i = new_page_id; i <3; i ++）は 'for（var i = undefined; i <3; i ++） –

jqueryページネーションが動作しない

答えて

関連する問題