Loading on demand

Question

Loading on demand

Navigation

#1 by (3 votes)

2

I am trying to make a load system on demand and I do not know anything about ajax and I did not quite understand how it would work.

I have a post system that shows a 10 post quantity on my page, and when I click on my second page (pagination) it shows 10 more and so until I finish my post from the bank.

What I wanted to do was to do a "Load button more on demand" system without having to go to another page.

My file that shows my posts

<?php
        $conexao = mysqli_connect("host", "jubileu", "1dois");
        mysqli_select_db($conexexao,"nada");

        $pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1;
        $cmd = "SELECT * FROM Banco_opa ORDER BY id DESC";
        $empresa = mysqli_query($conexexao,$cmd);
        $total = mysqli_num_rows($empresa);
        $registro = 10;
        $numPaginas = ceil($total/$registro);
        $inicio = ($registro*$pagina)-$registro;
        $cmd = " SELECT * FROM Banco_opa ORDER BY id DESC LIMIT $inicio,$registro";
        $empresa = mysqli_query($conexexao,$cmd);

        $total = mysqli_num_rows($empresa);
        while ($BancoID = mysqli_fetch_array($empresa)){echo'<div class="Post">'.$BancoID['ID'].'</div>';}
    ?>

If someone can help me vlw ^^

php javascript html ajax mysqli

asked by anonymous 25.05.2017 / 05:20

1 answer

C # How to rename MANY files faster or at the same time? Select the previous line if it is null

score 3 · Accepted Answer

Use jQuery and do something like:

HTML

<div id="content"></div>
<button id="ver-mais" data-ref="2">Carregar mais...</button>

javascript

//Carrega um conteúdo inicial ao carregar a página
$(document).ready(function(){

   $.ajax({
        url: 'pagina.php',
        data: {pagina:1},
        type: 'GET',

        success: function(response){

            $('#content').html(response);
        }
   }); 
});

//Carrega um conteúdo ao clicar no botão
$(document).ready(function(){

    $('#ver-mais').click(function(){

        let proxima_pagina = $(this).attr('data-ref');

        $.ajax({
            url: 'pagina.php',
            data: {pagina:proxima_pagina},
            type: 'GET',

            success: function(response){

                $('#content').append(response);
            },

            complete: function(){

                $('#ver-mais').attr('data-ref', parseInt(proxima_pagina) + 1);
            }
       }); 
    });
});

The first block loads content once the page loads fully, so it does not run out of content and only the button pops up.

The second, when you click it loads the new content below the last one.

The page.php is where you will do the paging (code you entered in the post).