我目前正在努力让pagination插件与我的网站一起使用。当我加载页面时，我在使用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 © 2009. All rights reserved.</p></div>
</div>
</body>
</html>
我只想在每页显示3个列表。
任何帮助都会很棒。谢谢。
答案 0 :(得分：1)
在阅读完代码并将其放入文件后，我注意到上面的代码new_page_id应该是new_page_index，而不是我收集的内容。此外，未定义content。你能发贴更多代码吗？它似乎引用了不存在或在代码中其他地方定义的变量。一旦我能得到这些信息，我将很乐意提供帮助。
<强>更新
所以这里的基本问题是你试图稍微使用README examples。在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数组中。
BUT
这是一种方式，你可以在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
});
});
答案 1 :(得分：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
答案 2 :(得分：0)
尝试将function handlePaginationClick()放在$(document).ready()之外。
函数确实不应该嵌入$(document).ready()内部，除非有理由将它们放在那里。将它们保留在全局范围内通常可以消除我的问题。
编辑： $("#News-Pagination").pagination()但是，如果我没有记错，应该在$(document).ready()内，因为它正在调用函数。
此外，new_page_id未在任何地方定义。它来自哪里？