jQuery Select2 v4 如何使用 AJAX 对结果进行分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32533757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 v4 how to paginate results using AJAX
提问by Diego
I'm trying to paginate results (every 25 rows) using Select2 4.0, but I don't know how to achieve it. Does somebody know how to do it?
我正在尝试使用 Select2 4.0 对结果（每 25 行）进行分页，但我不知道如何实现。有人知道怎么做吗？
If the user reach the end of the 25 rows and if there is more rows I would like to load it and show it.
如果用户到达 25 行的末尾并且还有更多行，我想加载它并显示它。
Here is my HTML template
这是我的 HTML 模板
<div class="form-group">
{!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}
</div>
And here is the JavaScript for Select2.
这是 Select2 的 JavaScript。
$("#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
}
});
And this is the code I have for my 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);
}
Also when I tried to put params.pageit says "undefined".
此外，当我试图把params.page它说“未定义”。
回答by Kevin Brown
Select2 supports pagination when using remote data through the paginationkey that comes out of processResults.
通过使用远程数据时选择二支持分页pagination自带的出关键processResults。
For infinite scrolling, the paginationobject is expected to have a moreproperty which is a boolean (trueor false). This will tell Select2 whether it should load more results when reaching the bottom, or if it has reached the end of the results.
对于无限滚动，该pagination对象应具有more一个布尔值（true或false）属性。这将告诉 Select2 在到达底部时是否应该加载更多结果，或者是否已经到达结果的末尾。
{
results: [array, of, results],
pagination: {
more: true
}
}
In your case, you have the ability to shape your results. So you can actually change your JSON response to match the expected format, which means you won't even need to use processResults.
在你的情况下，你有能力塑造你的结果。因此，您实际上可以更改 JSON 响应以匹配预期的格式，这意味着您甚至不需要使用processResults.
Select2 can pass in the page number as pageif you modify the ajax.datafunction to return it.
Select2可以传入页码，page就像修改ajax.data函数返回一样。
data: function(params) {
return {
term: params.term || "",
page: params.page || 1
}
},
And then you will be able to get the page using Input::get('page'). And you can calculate the total number of results to skip using (page - 1) * resultCount, where resultCountis 25in your case. This will allow you to modify your query to combine LIMITand OFFSETto get just the results you need.
然后您将能够使用Input::get('page'). 您可以使用 计算要跳过的结果总数，您的情况是(page - 1) * resultCount哪里。这将允许您修改查询以组合并获得所需的结果。resultCount25LIMITOFFSET
$page = Input::get('page');
$resultCount = 25;
$offset = ($page - 1) * $resultCount;
And you can use the following query to generate a LIMIT/ OFFSETquery (based on this Stack Overflow question.
您可以使用以下查询生成LIMIT/OFFSET查询（基于此 Stack Overflow 问题。
$breeds = Breed::where('name', 'LIKE', '%' . Input::get("term"). '%')->orderBy('name')->skip($offset)->take($resultCount)->get(['id',DB::raw('name as text')]);
So now $breedswill contain only the requested results. The only thing left to do is to shape the response to match how Select2 is expecting it. You can determine if there are more pages by checking the total number of results and seeing if you've run over the limit.
所以现在$breeds将只包含请求的结果。剩下要做的唯一一件事就是调整响应以匹配 Select2 的期望。您可以通过检查结果总数并查看是否超出限制来确定是否有更多页面。
$count = Breed::count();
$endCount = $offset + $resultCount;
$morePages = $endCount > $count;
So now $morePagesshould be a boolean, which is exactly what Select2 is looking for in pagination.more. Now you just need to shape the response to match the format I mentioned earlier.
所以现在$morePages应该是一个布尔值，这正是 Select2 在pagination.more. 现在您只需要调整响应以匹配我之前提到的格式。
$results = array(
"results" => $breeds,
"pagination" => array(
"more" => $morePages
)
);
And then rendering that
然后渲染那个
return response()->json($results);
Putting everything together, you get this for JavaScript
把所有的东西放在一起，你就得到了 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
}
});
And the following for your 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);
}
