Question

我有一个显示表格数据的网页，
我想知道如何通过向下滚动加载数据，facebook风格比如，加载50行，当你滚动到最后，再加载50行我不知道如何指定问题，否则我会搜索一个问题，答案“可能已经存在某个地方”，但我不知道我是否必须使用php，javascript或什么。 annione可以给我任何关于这个问题的指示吗？这是有问题的页面：

<html>
<head>
<script type="text/javascript" >
function test(id)
        {
            window.open("../remover/removeemail.php?id=" +     id,'Favourites','menubar,resizable,width=400,height=200');
        }
        function test2(id)
        {
            window.location = ("../editar/editaemail.php?id=" + id);
        }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<?php
mysql_connect("localhost","root","") or die("problema na conexao");
mysql_select_db("trabalho1");
    $query = "SELECT COUNT(id) FROM email";
    $results = mysql_query($query) or die(mysql_error());
            while ($row = mysql_fetch_assoc($results)) {
                foreach ($row as $campo=>$valor) {
                    if($campo=="COUNT(id)") 
                    {
                    $maxemail = $valor;
                    }                   
                                             }                          
                                                        }                   
$query = "SELECT * FROM email GROUP BY id ORDER BY nome";
$results = mysql_query($query) or die(mysql_error());   
            echo"<center>";
            echo "<table border='2'>\n";
            echo"<form>";
            echo"<tr><td colspan='3'>Numero de Emails Registrados: ".$maxemail. "</td><td colspan='3'><a align='left' href='../filtrar/filtroemail.php'>Filtrar Resultados</a>        <a align='right' href='../inserir/inseriremail.html'>Adicionar Email</a></td</tr>";
            echo "<tr align='center'><td>Data de Criação</td><td>Nome</td><td>Email</td><td>Data da ultima Actualização</td><td>Remover</td><td>Actualizar</td></tr>";
            while ($row = mysql_fetch_array($results)) {    

                                echo "<tr align='center'>\n";
                                echo "<td><b></b>".$row['datahora']. "</td>";       

                                echo "<td><b></b>".$row['nome']. "</td>";

                                echo "<td><b></b>".$row['email']. "</td>";

                                echo "<td><b></b>".$row['dataactual']. "</td>";


                                echo "<td><input name='eliminar' type='button' onClick='test(".$row['id'].")' value='Remover'></td>";
                                echo "<td><input name='editar' type='button' onClick='test2(".$row['id'].")' value='Actualizar'></td>";


                echo "</form>\n";
                                                            }
                echo "</table>\n";
                echo"</center>";
?>
</body>
</html>

Answer 1

你可以使用像JQuery Infinite滚动这样的插件。

Infinite scroll

这是一个演示。

Infinite scroll demo

Answer 2

你应该同时使用javascript和php。

我只会给你一些指示，因为你说你不能使用库。

创建一个包含表格的div
给div一个固定的高度，并将其设置为垂直可滚动（css）
将侦听器绑定到onscroll事件（javascript）
在监听器中检查滚动是否到达底部，如果是，则应该对php文件进行ajax调用（javascript调用php文件并在不重新加载页面的情况下获取结果）
咨询数据库并返回数据（php）
在表格中添加新数据（javascript）

使用jQuery实现Ajax调用非常容易，但如果没有它则更难（如果是跨浏览器）。

您可以找到教程here。

如果您需要更多指针，请评论我的答案，我会在其中插入更多信息。

通过向下滚动加载数据

2 个答案: