jquery 分页不工作

发布于 2024-07-27 17:07:28 字数 8008 浏览 8 评论 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 个列表。

任何帮助都会很棒。谢谢。

原文

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 © 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

韬韬不绝 2024-08-03 17:07:28

阅读代码并将其放入文件后，我注意到根据我的收集，上面的代码中的 new_page_id 应该是 new_page_index 。此外，content 未定义。您可以发布更多代码吗？它似乎引用了不存在或在代码中其他地方定义的变量。一旦获得此信息，我将很乐意提供帮助。

更新：

所以这里的基本问题是您尝试使用 README 示例有点太接近了。在自述文件中，content 只是一个示例变量，而不是回调函数的实际内置值。要将其用于您的页面，您需要编写一些代码。基本问题是您试图将信息从 PHP 传递到 Javascript。为了正确地做到这一点，您需要更新 PHP 文件以处理内联 Javascript 并让它吐出一些语句，例如：

$("#News-Pagination").pagination(,( 每页条目数：20，回调：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
    });
});

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 原文

小猫一只 2024-08-03 17:07:28

除了上面的代码之外，结果是通过 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
});
});

这几乎是涉及的所有代码。你需要插件文件吗？

另外，这是自述文件：
自述文件

In addition to the code above The results are being created through a php file and then displays in a div on the main page called 'output-listings'

Here is the file(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";           

    }

}

?>

As you can see, I put the #MyContentArea div through this file. I'm not sure if this is the correct place for it.

Here is the full JS file(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
});
});

That's pretty much all the code involved. do you need the plugin files?

Also, here is the readme file:
README

回复收藏 0 原文