jquery分頁不起作用

我目前正在努力使pagination插件與我的網站一起工作。當我加載頁面時，使用螢火蟲時沒有錯誤，但沒有顯示結果的數字。這是駕駛掩體。jquery分頁不起作用

這裏是我使用的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 2009-07-20 19:03:47

剛剛添加了ready函數和數字顯示，但我得到這個錯誤在螢火蟲 - > new_page_id沒有被定義 [打破這個錯誤] for（var i = new_page_id; i <3; i ++）{<有人知道這是什麼意思？ – Spyderfusion02 2009-07-20 19:09:46

閱讀代碼並將其放入文件後，我注意到在new_page_id以上的代碼中應該是new_page_index，從我收集的內容中可以看出。另外，未定義content。你可能會發布更多的代碼？它似乎是引用了變量，這些變量不存在或在代碼中的其他地方定義。一旦我可以獲得這些信息，我會很樂意提供幫助。

UPDATE：

所以這裏的根本問題是，你試圖使用README examples有點過於密切。在自述文件中，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，並從螢火蟲中消除了錯誤，但是當我單擊數字時他們什麼都不做，它們只是改變點擊狀態，因爲處於活動狀態而不活躍。 – Spyderfusion02 2009-07-20 20:43:54

感謝您的詳細解釋，我真的很感激。我有點不確定要添加到我的PHP文件。我是否創建一個變量來計算db中的文章數量，然後將其包含在js文件中？ – Spyderfusion02 2009-07-20 23:05:05

你不應該改變任何你的PHP。我在你之前發佈的靜態HTML上做了這件事，它工作。這是一個純粹的JS解決方案。我發佈的原始內容只有在你想用PHP來做時纔有意義。這取決於你感到舒服。它是現在還是不適合你？ – daveslab 2009-07-21 00:30:02

除了上面的代碼結果正在通過一個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 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-20 20:07:29 Spyderfusion02

嘗試把的$(document).ready()function handlePaginationClick()之外。

函數真的不應該嵌入$(document).ready()的內部，除非有理由讓它們在那裏。將它們保留在全局範圍中通常會爲我消除問題。

編輯：$("#News-Pagination").pagination()，但是，如果我沒有記錯的話，應該是裏面$(document).ready()，因爲它是調用一個函數。

另外，new_page_id沒有在任何地方定義。它來自哪裏？

來源

2009-07-20 20:53:41

試圖把這個功能放在ready fn之外，但似乎沒有發生。你在哪看到edit_page_id？或者你在談論new_page_id？ – Spyderfusion02 2009-07-20 21:13:01

對不起，更正。是的，它看起來像你正在引用一個未定義的變量。假設這是你的所有代碼，我認爲'for（var i = new_page_id; i <3; i ++）'就等同於說'for（var i = undefined; i <3; i ++）' – 2009-07-21 12:50:15

jquery分頁不起作用

回答

相關問題