當我添加「下一個」功能時，jquery分頁符會中斷

因此，我在嘗試使用我的第一個jQuery代碼，並且卡住了。當我添加「下一個」功能時，jquery分頁符會中斷

基本上我做了一個簡單的分頁腳本，我設置了顯示的行數爲3，當我查看結果頁面時，它顯示了搜索中返回的21行中的3行。

現在，當我將下一個函數添加到腳本中以逐頁移動並運行搜索時，結果不再顯示3行，而是顯示所有行。有人能告訴我我做錯了什麼嗎？

這是我的代碼：

<html> 
<head> 
<script src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

//Declaring Variables 
var page = 1; 
var per_page = 3; 
var items = $('.row').length; 
var page_last = Math.ceil(items/per_page); 
} 
//Set Page 
function setPage(page) { 
$('.row').slice(0, page * per_page).hide(); 
$('.row').slice(page * per_page - per_page, page * per_page).show(); 
$('.row').slice(page * per_page).hide(); 
$('#page_display').html('page ' + page); 

} 
//Next Button 
$('.next').click(function() { 
if (page < page_last) { 
page++; 
setPage(page); 
} 
}); 
//Previous Button 
$('.prev').click(function() { 
if (page > 1) { 
page--; 
setPage(page); 
} 
}); 

setPage(1); 
}); 
</script> 
</head> 
<body> 


<?php 

$host = 'localhost'; 
$username = 'root'; 
$password = ''; 

try { 
$dbh = new PDO("mysql:host=localhost;dbname=elitenv", $username, 
$password); 
} catch (PDOException $e) { 
echo $e->getMessage(); 
} 

$query = "SELECT * FROM `players` WHERE `id` > :val"; 
$stmt = $dbh->prepare($query); 
$stmt ->bindValue(':val', $_POST['search']); 
$row = $stmt->execute(); 

echo "<table border='1'>"; 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
echo"<tr class='row'><td>"; 
echo $row['id']; 
echo "</td></tr>"; 
} 
echo "</table>"; 


?> 
<div id="page_display"><br/> 
<button type="button" class="prev">Previous</button> 
<button type="button" class="next">Next</button> 
</div> 
</body> 
</html>

如果刪除了下一個按鈕，一個先前的按鈕功能它將再次顯示3行的21

來源

2013-08-04 user2447848

你可以創建一個樣本小提琴 –

@ 3dgoo沒有，這不是它，它在我的電腦代碼，必須已經錯過了複製和粘貼。 – user2447848

@ Sushanth--我不確定如何使用連接到mysql的代碼來獲得結果的jsfiddle。 – user2447848

卸下閉合}下面可變page_last

看到http://jsfiddle.net/hPM2H/

也不overwride的page_display DIV，你將失去你的未來和prev butto NS :)

來源

2013-08-04 21:45:31 Elpy

非常感謝，最近3個小時我一直在牆上敲打我的頭，試圖弄清楚我做錯了什麼。 – user2447848

這裏是趕上了：

//Declaring Variables 
var page = 1; 
var per_page = 3; 
var items = $('.row').length; 
var page_last = Math.ceil(items/per_page); 

$(document).ready(function() { 
    setPage(1); 
}); 

//Set Page 
function setPage(page) { 
    $('.row').slice(0, page * per_page).hide(); 
    $('.row').slice(page * per_page - per_page, page * per_page).show(); 
    $('.row').slice(page * per_page).hide(); 
    $('#page_display').html('page ' + page); 
} 


//Next Button 
$('.next').click(function() { 
    if (page < page_last) { 
     page++; 
     setPage(page); 
    } 
}); 

//Previous Button 
$('.prev').click(function() { 
    if (page > 1) { 
     page--; 
     setPage(page); 
    } 
});

你在錯誤的地方得到了一些支架。

這裏看到的jsfiddle：
http://jsfiddle.net/bayoffire/PzxF3/4/

來源

2013-08-04 21:51:49 lukassteiner

，仍然無法正常工作，做同樣的事情，我有一個問題。你有7行，它顯示所有7，但腳本說它的只顯示3.如果我刪除按鈕功能，它會顯示3 – user2447848

再看一遍。我忘了保存jsfiddle。 – lukassteiner

http://jsfiddle.net/bayoffire/PzxF3/4/ – lukassteiner

當我添加「下一個」功能時，jquery分頁符會中斷

回答

相關問題