Select2 v4 wie paginieren Ergebnisse mit AJAX

Question

Ich versuche, Ergebnisse (alle 25 Zeilen) mit Select2 4.0 paginieren, aber ich weiß nicht, wie Sie es erreichen. Weiß jemand, wie man es macht?

Wenn der Benutzer das Ende der 25 Zeilen erreicht und wenn es mehr Zeilen gibt, möchte ich es laden und zeigen.

Hier ist mein HTML-Template

<div class="form-group"> 
    {!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id']) !!} 
</div> 

Und hier ist das JavaScript für Select2.

$("#breed_id").select2({ 
    placeholder: 'Breed...', 
    width: '350px', 
    allowClear: true, 
    ajax: { 
     url: '', 
     dataType: 'json', 
     data: function(params) { 
      return { 
       term: params.term 
      } 
     }, 
     processResults: function (data, page) { 
      return { 
       results: data 
      }; 
     }, 
     cache: true 
    } 
}); 

Und dies ist der Code, den ich für meinen Controller

if ($request->ajax()) 
{ 
    $breeds = Breed::where('name', 'LIKE', '%' . Input::get("term"). '%')->orderBy('name')->take(25)->get(['id',DB::raw('name as text')]); 

    return response()->json($breeds); 
} 

auch haben, wenn ich versuchte, params.page um es sagt "undefiniert".

Answer 1

Select2 unterstützt die Paginierung bei Verwendung von Ferndaten über den Schlüssel pagination, der aus processResults stammt.

Für unendliche Scrollen, das pagination Objekt wird erwartet, dass eine more Eigenschaft haben, die eine boolean (true oder false) ist. Dies teilt Select2 mit, ob es mehr Ergebnisse beim Erreichen des unteren Bereichs laden soll oder ob es das Ende der Ergebnisse erreicht hat.

{ 
    results: [array, of, results], 
    pagination: { 
    more: true 
    } 
} 

In Ihrem Fall haben Sie die Möglichkeit, Ihre Ergebnisse zu gestalten. Sie können also Ihre JSON-Antwort so ändern, dass sie dem erwarteten Format entspricht. Das bedeutet, dass Sie nicht einmal processResults verwenden müssen.

Select2 kann die Seitennummer als page übergeben, wenn Sie die ajax.data Funktion ändern, um sie zurückzugeben.

data: function(params) { 
    return { 
     term: params.term || "", 
     page: params.page || 1 
    } 
}, 

Und dann werden Sie in der Lage sein, um die Seite zu bekommen mit Input::get('page'). Und Sie können die Gesamtzahl der zu überspringenden Ergebnisse mit (page - 1) * resultCount berechnen, wobei resultCount in Ihrem Fall 25 ist. Dadurch können Sie Ihre Abfrage so ändern, dass LIMIT und OFFSET kombiniert werden, um genau die Ergebnisse zu erhalten, die Sie benötigen.

$page = Input::get('page'); 
$resultCount = 25; 

$offset = ($page - 1) * $resultCount; 

Und Sie können die folgende Abfrage verwenden, um eine LIMIT/OFFSET Abfrage zu erzeugen (basierend auf this Stack Overflow question.

$breeds = Breed::where('name', 'LIKE', '%' . Input::get("term"). '%')->orderBy('name')->skip($offset)->take($resultCount)->get(['id',DB::raw('name as text')]); 

So, jetzt $breeds nur die gewünschten Ergebnisse enthalten. Das einzige, was ist noch zu tun Sie können bestimmen, ob mehr Seiten vorhanden sind, indem Sie die Gesamtanzahl der Ergebnisse überprüfen und feststellen, ob Sie das Limit überschritten haben

$count = Breed::count(); 
$endCount = $offset + $resultCount; 
$morePages = $endCount > $count; 

Also jetzt $morePages sollte ein Boolean, was genau ist, was Select2 in pagination.more sucht. Jetzt müssen Sie nur noch die Antwort an das Format anpassen, das ich bereits erwähnt habe.

$results = array(
    "results" => $breeds, 
    "pagination" => array(
    "more" => $morePages 
) 
); 

Und dann machen, dass

return response()->json($results); 

---

alles zusammen Einlochen, erhalten Sie diese für JavaScript

$("#breed_id").select2({ 
    placeholder: 'Breed...', 
    width: '350px', 
    allowClear: true, 
    ajax: { 
     url: '', 
     dataType: 'json', 
     data: function(params) { 
      return { 
       term: params.term || '', 
       page: params.page || 1 
      } 
     }, 
     cache: true 
    } 
}); 

und die folgenden für Ihren Controller

if ($request->ajax()) 
{ 
    $page = Input::get('page'); 
    $resultCount = 25; 

    $offset = ($page - 1) * $resultCount; 

    $breeds = Breed::where('name', 'LIKE', '%' . Input::get("term"). '%')->orderBy('name')->skip($offset)->take($resultCount)->get(['id',DB::raw('name as text')]); 

    $count = Breed::count(); 
    $endCount = $offset + $resultCount; 
    $morePages = $endCount > $count; 

    $results = array(
     "results" => $breeds, 
     "pagination" => array(
     "more" => $morePages 
    ) 
    ); 

    return response()->json($results); 
}