jquery pagination не работает

Я в настоящее время пытаюсь сделать плагин pagination с моим сайтом. Когда я загружаю страницу, я не получаю ошибок при использовании firebug, но нет чисел, отображаемых для результатов. Это вождение бункеров.jquery pagination не работает

Вот файл 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 листинг на каждой странице.

Любая помощь будет отличной. Спасибо.

источник

2009-07-20 Spyderfusion02

Внутри ли он готов к работе? – redsquare

только что добавил готовую функцию и отображение чисел, но я получаю эту ошибку в firebug -> new_page_id не указан [Break this this error] for (var i = new_page_id; i <3; i ++) {<- Кто-нибудь знает что это значит? – Spyderfusion02

После прочтения кода и ввода его в файл я заметил, что в коде выше new_page_id должно быть new_page_index, из того, что я собираю. Кроме того, content не определен. Не могли бы вы разместить больше кода? Похоже, что это ссылки на переменные, которые либо не существуют, либо определены в другом месте кода. Я буду рад помочь, когда смогу получить эту информацию.

UPDATE:

Так что основная проблема здесь заключается в том, что вы пытаетесь использовать 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.

НО

Вот один, как вы могли бы сделать все это в 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-20 19:49:04 daveslab

Я изменил new_page_id на new_page_index и избавился от ошибки от firebug, но когда я нажимаю цифры, они ничего не делают, они просто меняют состояния кликов, как активные, а не активные. – Spyderfusion02

Спасибо за подробное объяснение, я действительно ценю это. Я немного не уверен, что добавить в мой php-файл. Создать переменную, которая будет подсчитывать количество статей в db, а затем включить это в файл js? – Spyderfusion02

Вам не нужно ничего менять на своем PHP. Я сделал это на статическом HTML, который вы опубликовали ранее, и это сработало. Это чисто JS-решение. Исходные вещи, которые я опубликовал, релевантны только в том случае, если вы хотите сделать это на PHP. Это зависит от того, с чем вам удобно. Он работает для вас сейчас или нет? – daveslab

В дополнение к описанной выше коде результаты создаются с помощью файла PHP, а затем отображаются в 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. Я не уверен, что это подходящее место для этого.

Вот полный 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-20 20:07:29 Spyderfusion02

Попробуйте положить function handlePaginationClick() за пределами $(document).ready().

Функции действительно не должны быть встроены в $(document).ready(), если нет причин для их наличия. Сохранение их в глобальном масштабе часто устраняет проблемы для меня.

EDIT:$("#News-Pagination").pagination(), однако, если я не ошибаюсь, должен быть внутри $(document).ready(), так как вызов функции.

Кроме того, new_page_id не определен нигде. Откуда он?

источник

2009-07-20 20:53:41

Пытался поставить эту функцию за пределы готового fn, но ничего не произошло. Где вы видите edit_page_id? или вы говорите о new_page_id? – Spyderfusion02

извините, исправлено. Да, похоже, что вы ссылаетесь на неопределенную переменную. предполагая, что это весь ваш код, я считаю, что выражение 'for (var i = new_page_id; i <3; i ++)' эквивалентно выражению 'for (var i = undefined; i <3; i ++)' –

jquery pagination не работает

ответ

Смежные вопросы