Php 当我添加“next”函数时，jquery分页中断_Php_Jquery

Php 当我添加“next”函数时，jquery分页中断

php jquery

Php 当我添加“next”函数时，jquery分页中断,php,jquery,Php,Jquery,所以我正在尝试我的第一个jquery代码，我被卡住了基本上，我正在制作一个简单的分页脚本，我已经将要显示的行数设置为3，当我查看结果页面时，它会显示搜索中返回的21行中的3行现在，当我向脚本添加下一个函数以从一页移动到另一页并运行搜索时，结果不再显示3行，而是显示所有行。有人能告诉我我做错了什么吗这是我的密码： <html> <head> <script src="jquery-1.10.2.min.js"></script> <

所以我正在尝试我的第一个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行。

删除变量页面下方的“最后一页”关闭按钮

看

另外，不要过度使用页面显示div，您将丢失“下一步”和“上一步”按钮：

删除“上一步”变量页面下方的关闭按钮

看

另外，不要过度使用页面显示div，您将丢失“下一步”和“上一步”按钮：

这里提供了：

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

你把括号放错地方了

请参见此处的JSFIDLE：

以下是我们提出的：

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

你把括号放错地方了

请参见此处的JSFIDLE：

您能创建一个示例吗fiddle@3dgoo不，不是这样的，它在我电脑上的代码中，在复制和粘贴过程中肯定丢失了。@Sushanth-我不知道如何使用连接到mysql的代码制作JSFIDLE以获得结果。@user2447848使用浏览器的html输出。您能创建一个示例吗fiddle@3dgoo不，不是这样，它在我电脑上的代码中，在复制和粘贴过程中一定丢失了。@Sushanth-我不知道如何使用连接到mysql的代码创建JSFIDLE以获取结果。@user2447848使用浏览器的html输出。这仍然不起作用，与我遇到的问题相同。您有7行，它显示所有7行，但脚本说它只显示3行。如果我删除按钮功能，它将显示3再次查看。我忘了保存JSFIDLE。这仍然不起作用，与我遇到的问题相同。您有7行，它显示所有7行，但脚本说它只显示3行。如果我删除按钮功能，它将显示3再次查看。我忘了救JSFIDLE了。非常感谢，我在过去的3个小时里一直在绞尽脑汁想知道我做错了什么。非常感谢，我在过去的3个小时里一直在绞尽脑汁想知道我做错了什么。