Scroll infito en laravel 5.4

Crear un scroll infinito en Laravel

En este tutorial, te voy a enseñar cómo auto cargar más datos en la página con el desplazamiento utilizando jQuery y PHP Laravel.

No es necesario hacer clic en ningún lugar para cargar mas datos; porque los datos se están cargando en la página automáticamente al ir bajando.

Hay tantos sitios web que utilizan la misma lógica para cargar datos en la página de desplazamiento, esto es muy útil para varios casos.

Comprueba si la longitud de los datos es igual a 0 y luego muestra el mensaje "No más registros!" Y si la longitud de los datos es más de 0 entonces agrega los datos del html a la lista.

Aquí está un paso simple para dejarle saber sobre la carga de datos automáticamente en la página de desplazamiento de arriba a abajo con jQuery y PHP.

Creamos nuestro modelo Producto:

ruta: app/Producto.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Producto extends Model
{
    public $fillable=['nombre','descripcion'];
}

Agregamos la siguiente ruta:

routes/web.php

Route::get('cargar-mas-datos',[
    'as'=>'cargar-mas-datos','uses'=>'ProductoController@cargarMasDatos'
]);

En este paso, crearemos un controlador ProductoController con un método cargarMasDatos.

app/Http/Controllers/ProductoController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Producto;

class ProductoController extends Controller
{
    


    public function cargarMasDatos(Request $request){
        $productos=Producto::paginate(5);
        $html='';
        foreach ($productos as $model) {
            $html.='<li>'.$model->id.' <h2>'.$model->nombre.'</h2> : '.$model->descripcion.'</li>';
        }
        if ($request->ajax()) {
            return $html;
        }
        return view('productos',compact('productos'));
    }
}

Creamos nuestra vista productos.blade.php:

resources/views/productos.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Creacion de scroll infinito con Laravel y jquery</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auto cargar datos</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" media="all"
    />
    <style>
        .wrapper>ul#results li {
            margin-bottom: 2px;
            background: #f9f9f9;
            padding: 40px;
            list-style: none;
        }

        .cargar-mas-datos {
            text-align: center;
        }
    </style>

</head>

<body>


    <div>
        <br/>
        <br/>

        <div class="text-center">
            <h1 class="post-title">Auto cargar datos a lo que bajas en Laravel - scroll infinito </h1>
        </div>
        <hr>


        <div class="container">


            <div class="row">

                <div class="col-md-8 col-md-offset-2">
                    <div class="wrapper">
                        <ul id="results">
                            <!-- los resultados aparecen aquí -->
                        </ul>
                        <div class="cargar-mas-datos"><img src="{{asset('img/loading.gif')}}" /></div>
                    </div>
                </div>
            </div>
        </div>



    </div>

    <hr/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.expertphp.in/js/bootstrap.js "></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>
        var page = 1; //Pista usuario desplazarse como número de página, ahora el número de página es 1
        cargamosMasDatos(page); // carga de contenido inicial

        $(window).scroll(function () { // detecta desplazamiento de página
            if ($(window).scrollTop() + $(window).height() >= $(document).height()) { // si el usuario se desplazó hasta la parte inferior de la página
                page++; //Incremento del número de página
                cargamosMasDatos(page); //carga contenido  
            }
        });

        function cargamosMasDatos(page) {
            $.ajax(
                {
                    url: '?page=' + page,
                    type: "get",
                    datatype: "html",
                    beforeSend: function () {
                        $('.cargar-mas-datos').show();
                    }
                })
                .done(function (data) {
                    if (data.length == 0) {
                        console.log(data.length);

                        // notificar al usuario que ya no hay nada mas que cargar
                        $('.cargar-mas-datos').html("¡No hay más registros!");
                        return;
                    }

                    $('.cargar-mas-datos').hide(); // ocultar la carga de la animación una vez que se reciben los datos
                    $("#results").append(data); // agrega datos al elemento #results


                })
                .fail(function (jqXHR, ajaxOptions, thrownError) {
                    alert('No hay respuesta del servidor');
                });
        }
    </script>
</body>

</html>