Asynchronous paging with Laravel

Asked

Viewed 1,201 times

2

I made a simple pagination with the laravel using the return of ->paginate(), however, as you know, it is not an asynchronous action, which makes paging bad.

I found some examples, but I couldn’t make it work. Someone has tips?

php javascript jquery ajax laravel-5

  • You are wanting to implement a pagination with AJAX, in the Laravel? have any code? Have some HTML and the Model related the fields of that return ?

  • What are you talking about? What are you trying to do? Are you trying to use Laravel’s`Paginator along with Ajax? I do it most of the time and it’s worked out really well.

  • That’s right Allace, I have a list of items of the object already paginated by Aravel, however I’m not able to apply the ajax in it, you have some example?

  • @Douglascarvalho example helped you, clarified?

1 answer

3


Using $.post of and the paginate() of has an easy way to work with ajax:

Example:

Table

inserir a descrição da imagem aqui

The table parque has two fields the id and the description

Model Parque

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Parque extends Model
{
    protected $fillable = array('description');
    protected $table = 'parque';
    public $timestamps = false;
}

Routes

Route::get('pagina', ['as' => 'pagina.get', 'uses'=>'PaginasController@index']);
Route::post('pagina', ['as' => 'pagina.post', 'uses'=>'PaginasController@post']);

Controller PaginasController 

<?php

namespace App\Http\Controllers;

use App\Models\Parque;
use Illuminate\Http\Request;

class PaginasController extends Controller
{
    public function index()
    {
        return view('parques');
    }

    public function post()
    {
        $data = ['data' => Parque::orderBy('description')->paginate(5)];
        return view('table', $data);
    }
}

Home page (filing cabinet parques.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-2.2.4.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
</head>
<body>
<div id="table"></div>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    function getTable(url)
    {
        if (url == '') url = "{{route('pagina.post')}}";
        $.post(url, null, function(data)
        {
            $('#table').html(data);
            linkAjax();
        },'html');
    }
    function linkAjax()
    {
        $items = $('#table table').find('[href]');
        $.each($items, function(index, element){
            var href = $(element).attr('href');
            $(element).attr('href', 'javascript:getTable("' + href + '")');
        });
    }
    $(document).ready(function(){
        getTable('');
    });
</script>
</body>
</html>

Excerpt from the table to be loaded via ajax (filing cabinet table.blade.php):

<table class="table">
    <tr>
        <th style="width: 20%">Id</th>
        <th>Descrição</th>
    </tr>
    @foreach($data as $v)
    <tr>
        <td>{{$v->id}}</td>
        <td>{{$v->description}}</td>
    </tr>
    @endforeach
    <tr>
        <td colspan="2" valign="center" align="center">
            {{ $data->links() }}
        </td>
    </tr>
</table>

Observing: this is an example that should be adapted to your project, due to lack of information, I could not reflect to a real example, but, functional.

Browser other questions tagged php javascript jquery ajax laravel-5

You are not signed in. Login or sign up in order to post.