Jquery分页-处理不可见页面

我的问题是，处理不可见页面的最佳方式是什么

$('.results').slice('//hidden pages').hide();
$('.results').slice('//current page').show();

<?php
while ($row = mysql_fetch_assoc($query)) {
   echo '<span class="results">' . $row['items'] . "</span><br/>";
}
?>

$（'.results'）.slice（'//隐藏页面'）.hide（）；
$（'.results'）.slice（'//当前页'）.show（）；

目前我使用的是

$.hide（）

，它工作得很好——直到查询返回数千行数据（精确地说大约9000行）。如果查询的结果太多，它似乎会延迟/崩溃firefox。

hide/show

这样做是错误的吗？我一直在研究Jquery

$.detach

，但不确定这是否能解决这个问题

---

这应该用PHP来处理吗？

为什么不使用AJAX动态加载值？我认为您选择的方法消耗了太多内存，因为它在DOM中生成了太多节点，导致Firefox崩溃。

客户端只能处理这么多。如果您想查看示例，请尝试处理10000000字节的字母a（不建议实际运行此操作）：

var a=“a”；
var z=100000000；
对于（变量i=0；i

通常，分页所做的是按需加载当前页面。然后，将释放不起作用的页面

我建议在页面导航中附加一个ajax事件：

<div id="myTag"></div>
<div class="PageNumbers" data-page-number="1">1</div>
<script type="text/javascript">
              $(".PageNumbers").click(function () {
                 $.ajax({
                    url: "/Page/",
                    type: 'GET',
                    data: { page: $(this).attr("data-page-number")},
                    success: function (result) {
                        $("#myTag").html(result);
                     }
                });
              });
</script>

1.
$（“.PageNumber”）。单击（函数（）{
$.ajax({
url:“/Page/”，
键入：“GET”，
数据：{page:$（this.attr（“数据页码”）}，
成功：功能（结果）{
$（“#myTag”）.html（结果）；
}
});
});

---

此外，页面中需要保留的最大部分是图像。在数组中遇到它们时存储它们可以大大减少“已发现”内容的重新加载。

其速度慢的主要原因是您正在操作9000 x n DOM元素

避免这种情况的一种方法是将结果存储在javascript数组中，并且只呈现当前页面中的项

这是可行的，但对于jQuery来说有点乏味，并且在其他一些javascript库（如knockout）的帮助下会更容易做到

下面是一个使用knockout的示例实现：

---

编辑：添加了示例代码

这正是我决定用JQuery而不是PHP处理分页的原因。每次加载新页面时不运行查询的好处。但是，如果这是最好的解决方案，我会走这条路。我理解你的观点，但我认为使用AJAX是最好的方法，因为你将节省带宽，加载过程将非常快，因为你只需要处理可以由服务器gzipe处理的文本。你如何识别隐藏的页面？像这样Zuul:

$（'.row'）。切片（0，page*per_page-per_page）.hide（）；

这太棒了。我会调查淘汰赛。谢谢。

<div id="myTag"></div>
<div class="PageNumbers" data-page-number="1">1</div>
<script type="text/javascript">
              $(".PageNumbers").click(function () {
                 $.ajax({
                    url: "/Page/",
                    type: 'GET',
                    data: { page: $(this).attr("data-page-number")},
                    success: function (result) {
                        $("#myTag").html(result);
                     }
                });
              });
</script>