JQuery нумерация страниц не работает
В настоящее время я пытаюсь заставить плагин для работы с моим сайтом работать. Когда я загружаю страницу, я не получаю ошибок при использовании 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 списка на странице.
Любая помощь будет отличной. Спасибо.
3 ответа
Прочитав код и поместив его в файл, я заметил, что в приведенном выше коде 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, и это НЕ лучший способ, но самый быстрый на данный момент:
// 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
});
});
Попробуйте положить function handlePaginationClick() вне $(document).ready(),
Функции действительно не должны быть встроены в $(document).ready() если нет какой-либо причины иметь их там.. Хранение их в глобальном масштабе часто устраняет проблемы для меня.
РЕДАКТИРОВАТЬ: $("#News-Pagination").pagination()Однако, если я не ошибаюсь, должно быть внутри $(document).ready(), так как он вызывает функцию.
Также new_page_id нигде не определен. Откуда это?
В дополнение к приведенному выше коду результаты создаются через php-файл, а затем отображаются в div на главной странице под названием "output-листинги".
Вот файл (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";
}
}
?>
Как вы можете видеть, я поместил div #MyContentArea через этот файл. Я не уверен, что это правильное место для этого.
Вот полный файл JS (перечисление.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