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 示例有点过于接近。在自述文件中，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) is $("#News-Pagination")，因此您无需再次使用 DOM 选择器获取它。

最后，这是最难的部分，您需要将之前输入的所有文本从 DOM 扫描到 JavaScript 数组中。

但

这是您可以在 JS 中完成所有操作的一种方法，它不是最好的方法，但目前最快：

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

于 2009-07-20T20:07:29.590 回答
0

尝试function handlePaginationClick()将$(document).ready().

函数真的不应该嵌入其中，$(document).ready()除非有某种理由将它们存在其中。将它们保持在全局范围内通常会为我消除问题。

编辑： $("#News-Pagination").pagination()但是，如果我没记错的话，应该在里面$(document).ready()，因为它正在调用一个函数。

此外，new_page_id 没有在任何地方定义。它来自哪里？

于 2009-07-20T20:53:41.133 回答