0

現在、ページネーションプラグインを自分のサイトで動作させようとしています。ページをロードすると、firebug を使用してもエラーは発生しませんが、結果を表示する数値はありません。それはバンカーを運転しています。

私が使用しているJSファイルは次のとおりです。

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

また、ページのソースが必要になるかもしれないと思いました：

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

ページごとに 3 つのリストを表示したいだけです。

どんな助けでも素晴らしいでしょう。ありがとうございました。

4

3 に答える 3

1

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

アップデート：

したがって、ここでの基本的な問題は、READMEの例を少し近づけすぎて使用しようとしていたことです。READMEでは、contentは単なる変数の例であり、コールバック関数に実際に組み込まれている値ではありません。ページで使用するには、少しコードを書く必要があります。基本的な問題は、PHPからJavascriptに情報を渡そうとしていることです。これを正しく行うには、PHPファイルを更新してインラインJavascriptも処理し、次のようなステートメントを吐き出す必要があります。

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

NUM_OF_ARTICLESデータベースからフェッチする記事の数はどこにありますか。この数は、" while($row = $result->fetch_object()) { $id = $row->id; ..."ループで変数をインクリメントすることで取得できます。

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

最後に、これは難しい部分です。以前に入力したすべてのテキストを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-20T19:49:04.573 に答える
0

上記のコードに加えて、結果はphpファイルを介して作成され、「output-listings」と呼ばれるメインページの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 をこのファイルに挿入しています。これが正しい場所かどうかはわかりません。

完全な JS ファイル (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
});
});

関係するコードはこれでほぼすべてです。プラグインファイルが必要ですか？

また、readme ファイルは次のとおりです: README

于 2009-07-20T20:07:29.590 に答える
0

function handlePaginationClick()の外に置いてみてください$(document).ready()。

関数をそこに置く何らかの理由がない限り、実際には関数を内部に埋め込むべきではありません$(document).ready()..それらをグローバルスコープに保持することで、多くの場合、問題が解消されます。

EDIT： $("#News-Pagination").pagination()ただし、私が間違っていなければ$(document).ready()、関数を呼び出しているため、内部にある必要があります。

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

于 2009-07-20T20:53:41.133 に答える