CODEWITHSUNDEEP
phphtml
Heatmanofurioso
Heatmanofurioso

Reputation: 1028

Loading data through scrolldown

i have a web page that shows tabular data,
and i would like to know how to load the data through scrolling down, facebook style.
Like, loading 50 rows, and when you scroll to the end, load 50 more.
I don't know how to specify the question, or else i would have searched for a question with an answer "there is probably already somewhere", but i don't know if i have to use php, javascript or what. Can annione give me any pointers on the subject?
This is the page in question: 

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

Upvotes: 0

Views: 55

Answers (2)

dogiordano
dogiordano

Reputation: 714

You should use both javascript and php.

I'll only give you some pointers because you said you can't use libraries.

  • Create a div containing the table
  • Give the div a fixed height and set it scrollable vertically (css)
  • Bind a listener to the onscroll event (javascript)
  • In the listener you check if the scroll reached the bottom and if so, you should make an ajax call to a php file (javascript makes a call to a php file and get result back without reloading the page)
  • Consult the database and return data (php)
  • Add the new data in the table (javascript)

Ajax calls are VERY EASY to implement with jQuery but more difficult (if cross-browser) without it.

You can find a tutorial here.

If you need more pointers on this, comment my answer and I will insert more informations in it.

Upvotes: 0

Jay Bhatt
Jay Bhatt

Reputation: 5651

You can use a plugin like JQuery Infinite scroll.

Infinite scroll

Here's a demo.

Infinite scroll demo

Upvotes: 1

Related Questions