CODEWITHSUNDEEP
phpjquery
user2447848
user2447848

Reputation: 289

jquery pagination breaks when i add "next" function

So I'm making an attempt at my first jquery code and I'm stuck.

Basically I'm making a simple pagination script, I've set the number of rows to display to 3 and when I view the results page it shows 3 out of the 21 rows returned in the search.

Now when I add the next function to the script to move from page to page and run a search the results no longer display the 3 rows but instead display all the rows. Can someone tell me what I am doing wrong?

Here is my code: 

    <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>

If I remove the next button and prev button functions it will once again display 3 rows of 21.

Upvotes: 2

Views: 455

Answers (2)

lukassteiner
lukassteiner

Reputation: 847

Here is came up with:

//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);
    }
});

You got some brackets at the wrong place.

See the jsFiddle here:
http://jsfiddle.net/bayoffire/PzxF3/4/

Upvotes: 1

Elpy
Elpy

Reputation: 272

Remove the closing } below variable page_last

see http://jsfiddle.net/hPM2H/

also don't overwride the page_display div, you will lose your next and prev buttons :)

Upvotes: 3

Related Questions