AJAX paginazione con Laravel

Ho questo punto di vista chiamato posts.blade.php il quale viene incluso in home.blade.php:

<div id="posts">
    @foreach ($posts as $post)
        <div class="list-item clearfix">
            <div class="content">
                <img src="{{ URL::to($post->thumbnail) }}" alt="" />
                <h1>{{{ $post->title }}}</h1>
            </div>
            <div class="score">{{ $post->rating }}</div>
        </div>
    @endforeach
    <div id="pagination">{{{ $posts->links() }}}</div>
</div>

Quando un utente esegue una ricerca per determinati posti di lavoro, il controller postSearch() funzione restituisce un JSON di risposta:

function postSearch() 
{
    $posts = $posts->select(...)->where(...)->orderBy(...)->paginate(5); //Search posts

    return Response::json(View::make('includes.posts', ['posts' => $posts])->render());
}

E jQuery aggiunge l’HTML del #posts div:

$('#search').submit(function(e) {
    e.preventDefault();
    var form = $(this);

    $.post(form.attr('action'), form.serialize(), function(data) {
        $('#posts').html(data);
    });
});

Questo funziona perfettamente. Ma ora quando clicco su una impaginazione link, la pagina viene ricaricata e i risultati della mia ricerca sono andato (ovvio). Come faccio a impaginare questi post? Ho letto questo, questo e questo articolo, ma non riesco a capire come implementarlo.

Modifica

Questo è il mio jQuery per l’impaginazione finora:

$('#posts').on('click', '.pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
        page = url.split('page=')[1],
        data = $('#search').serializeArray();

    data.push({page: page}); //Add page variable to post data
    console.log(data);

    $.post($('#search').attr('action'), data, function(data) {
        $('#posts').html(data['posts']);
    });
});

Si tratta di dati è in fase di invio, quando clicco su una impaginazione link (pagina 2):

AJAX paginazione con Laravel

Purtroppo, non accade nulla, il post da pagina 1 continuare a dimostrare.

InformationsquelleAutor JasonK | 2014-11-05

 

4 Replies
  1. 9

    Io non sono molto familiare con la paginazione in Laravel, ma a giudicare dal link che avete elencato non sembra troppo difficile. Questo codice non è testato, anche se…

    $('#pagination a').on('click', function(e){
        e.preventDefault();
        var url = $(this).attr('href');
        $.post(url, $('#search').serialize(), function(data){
            $('#posts').html(data);
        });
    });

    Aggiornamento

    Nel caso In cui l’impaginazione link sono sbagliati (come lo erano per l’OP) è necessario per costruire la url da te.

    Basta prendere l’url che si desidera e aggiungere ?page=#number ad esso.

    //page being the page number stripped from the original link
    var url = $('#search').attr('action')+'?page='+page;
    • Si prega di vedere la mia modifica. Ho provato il tuo codice ma restituisce il codice HTML della mia pagina iniziale, perché href di un impaginazione link è http://localhost:8080/laravel/laravel/public?page=2.
    • Provare a inviare il numero di pagina tramite GET. Ho fatto alcune prove e sembra che Laravel non pick up il POST parametro. Basta aggiungere all’azione url: $('#search').attr('action')+'?page='+page
    • Grande! Ho aggiornato la risposta un po ‘ per rendere chiaro per il futuro dei visitatori…
    • Vorrei precisare che il if ($(this).attr('href') == '#') di controllo non è necessario in quanto l’attuale impaginazione link non è cliccabile.
    • Grazie, rimosso… Probabilmente era cliccabile in una precedente versione del framework
  2. 1

    Ho lo strumento perfetto per il lavoro. Si prega di controllare questo repo https://github.com/themightysapien/ajaxtable

    Si prega di leggere la documentazione è molto facile da usare ed è fatto appositamente per laravel. Tutto quello che dovete fare è restituire i risultati come esempio seguente.

    return Response::json(array(
                  'data'=> View::make('only_table_row_view', compact('collection')->render(),
                  'pagination'=>(string) $collection->links()
                  ));

    I file da aggiungere

    <link rel="stylesheet" href="css/ajaxtable.css">
    <script src="js/plugins.js"></script>
    $(".yourtable").ajaxtable();

    Inizializzare il vostro url ajax attraverso dati requestUrl attributo di una tabella.
    Aggiungi un id=”paginationWrapper” div nella pagina in cui vuoi che il tuo impaginazione per apparire.

    Se avete qualche problema per eseguire il repo locale server e visualizzare il codice html marcature e le opzioni del plugin.

  3. 1

    Sto usando seguenti js per ottenere i dati sulla href fare clic su.

    //Your Local url 
    var Url = 'laraveltestproject/laravelpagination';
    
    $('#ajaxContent').load("Url");
    
    $('.pagination a').on('click', function(event) {
    
        event.preventDefault();
        if ($(this).attr('href') != '#') {
            $('#ajaxContent').load($(this).attr('href'));
        }
    });

    Per Completare esempio, si può visitare il http://www.tutsway.com/laravel-ajax-pagination-example.php.

  4. 1

    Esempio per un post in un blog, risolvere paginate di ricarica sul pulsante elimina:
    (sinple foreach ma è necessario assegnare un id al pannello e pulsante e di una classe a pulsante e utilizzare $post->id per definire tutti)

    Il trucco è non chiamare la view/controller che utilizza la paginazione() ma il panorama cambia con javascript come si desidera.

          @foreach($posts as $post)
        <div id="panel{{$post->id}}" class="panel panel-default">
          <div class="panel-body">
            {!! $post->content !!}
          </div>
          <div class="panel-footer">
            <span class="label label-default"><span class="glyphicon glyphicon-time"></span> creado {{$post->created_at->diffForHumans()}}</span>
            <span class="label label-default"><span class="glyphicon glyphicon-time"></span> modificado {{$post->updated_at->diffForHumans()}}</span>
            <span class="label label-success">autor: {{ imagica\User::find($post->user_id)->name}}</span>
            @if(Auth::user()->id === $post->user_id)
    
              <form method="post" style="position:relative; top:-25px;">
                <button class="btn btn-danger btn-sm pull-right destroy" id="{{$post->id}}" type="button" >eliminar</button>
              </form>
    
              <form action="{{ action('[email protected]', $post->id) }}" method="get" style="position:relative; top:-25px;">
                <button class="btn btn-warning btn-sm pull-right" type="submit" >Editar</button>
                {{ -- {{ csrf_field() }} -- }}
              </form>
            @endif
          </div>
        </div>
      @endforeach

    all’ultimo di vista javascript:

    $(function(){
    $(".destroy").on("click", function(){
      var vid = $(this).attr("id");
      var v_token = "{{csrf_token()}}";
      var parametros = {_method: 'DELETE', _token: v_token};
      var archivo = "http://imagica.app/posts/" + vid + "";
      $.ajax({
         type: "POST",
         url: archivo,
         data: parametros,
         success: function(data){
           $('#panel'+ data).hide();
           location.reload();
         }
      });
    });
    });

    Nel controller di distruggere funzione (nota si invia $post->id come dati di ajax, viene utilizzato per definire i selettori per nascondere il pannello di post si elimina):

        public function destroy($id)
    {
      $post= Post::find($id);
      $article_id= $post->article_id;
      $article= Article::find($article_id);
      $msg = session()->flash('message', "Post eliminado.");
      $post-> delete();
      $data= $post->id;
      return $data;
    }

    In javascript ultima funzione “posizione.reload()” al fine di carica del flash messaggio.

Lascia un commento