AJAX Paginierung mit Laravel

Habe ich diese Sichtweise genannt posts.blade.php die wird enthalten 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>

Wenn ein Nutzer nach bestimmten posts, die Steuerung ist postSearch() - Funktion liefert eine JSON-Antwort:

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

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

Und jQuery fügt die HTML-Datei auf der #posts div:

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

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

Dieser funktioniert perfekt. Aber jetzt wenn ich auf eine Paginierung link, die Seite wird neu geladen und meine Suchergebnisse sind Weg (logisch). Wie kann ich den Seitenumbruch solche posts? Ich habe gelesen,diese, diese und diese Artikel, aber ich verstehe nicht, wie es zu implementieren.

Bearbeiten

Dies ist mein jQuery für die Paginierung so weit:

$('#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']);
    });
});

Dies ist Daten senden, wenn ich auf eine Paginierung link (Seite 2):

Leider passiert nichts, die posts von Seite 1 weiterhin zeigen.

InformationsquelleAutor JasonK | 2014-11-05

8

Ich bin nicht sehr vertraut mit der Paginierung in Laravel aber die Beurteilung von den links, die Sie aufgelistet, es sieht nicht allzu schwer. Dieser code ist ungetestet, aber...
```
$('#pagination a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.post(url, $('#search').serialize(), function(data){
        $('#posts').html(data);
    });
});
```
Update

Im Fall der Seitenumbruch links falsch sind (wie die waren für die OP) bauen Sie die url selbst.

Nehmen Sie einfach die url, die Sie möchten, und fügen Sie ?page=#number zu.
```
//page being the page number stripped from the original link
var url = $('#search').attr('action')+'?page='+page;
```
- Bitte siehe mein edit. Ich versuchte Ihren code, aber es gibt den HTML-Code meiner Homepage, weil die href eines Paginierung link ist http://localhost:8080/laravel/laravel/public?page=2.
- Schicken Sie die Nummer der Seite über BEKOMMEN. Ich habe einige Tests und es sieht aus wie Laravel nicht abholen der POST-parameter. Nur hängen Sie an der action-url: $('#search').attr('action')+'?page='+page
- Super!!! Ich aktualisierte die Antwort ein bisschen deutlich zu machen, die für zukünftige Besucher...
- Lassen Sie mich darauf hinweisen, dass die if ($(this).attr('href') == '#') check ist nicht notwendig, da die aktuelle Paginierung link ist nicht anklickbar.
- Vielen Dank, entfernt es... Wahrscheinlich war es anklickbar in einer früheren version des Frameworks
InformationsquelleAutor lukasgeiter
1

Habe ich das perfekte Werkzeug für den job. Bitte schauen Sie sich das repo https://github.com/themightysapien/ajaxtable

Bitte die Dokumentation Lesen, es ist sehr einfach zu bedienen und ist speziell für laravel. Alles, was Sie tun müssen, ist die Rückgabe das Ergebnis im folgenden Beispiel.
```
return Response::json(array(
              'data'=> View::make('only_table_row_view', compact('collection')->render(),
              'pagination'=>(string) $collection->links()
              ));
```
Erforderlichen Dateien hinzufügen
```
<link rel="stylesheet" href="css/ajaxtable.css">
<script src="js/plugins.js"></script>
$(".yourtable").ajaxtable();
```
Initialisieren Sie Ihre ajax-url durch Daten-requestUrl Attribut in der Tabelle.
Hinzufügen eines id="paginationWrapper" div auf Ihrer Seite, wo Sie möchten, dass Ihre Seitenzählung erscheinen.

Wenn Sie irgendwelche Probleme haben, führen Sie das repo in Ihrem lokalen server ein und finden Sie die Quelle für html-markups und den plugin-Optionen.

InformationsquelleAutor themightysapien

Bin ich mit folgenden js, um Daten auf "href" klicken.

//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'));
    }
});

Für eine Vollständige Beispiel können Sie die http://www.tutsway.com/laravel-ajax-pagination-example.php.

InformationsquelleAutor Manish

Beispiel für die post in einem blog, lösen Sie den Seitenumbruch erneut auf Taste "löschen":
(sinple foreach-aber Sie müssen ein id-panel und button und eine Klasse button und verwenden Sie $post->id zu definieren)

Den trick endlich nicht rufen Sie die view/controller mit Paginierung (), aber die Ansicht ändern mit javascript, wie Sie wollen.

      @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('PostsController@edit', $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

endlich der Ansicht 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();
     }
  });
});
});

Controller zerstören-Funktion (Hinweis: Sie senden $post->id als Daten an ajax -, es wird verwendet, um zu definieren Selektoren zu verbergen panel der Beitrag, den Sie löschen):

    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 Letzte Funktion "Standort.reload()" ist, um zu berechnen, flash-Mitteilung.

InformationsquelleAutor Raul Fernandez Marques

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update