Select2 v4 如何使用 AJAX 对结果进行分页
Select2 v4 how to paginate results using AJAX
我正在尝试使用 Select2 4.0 对结果(每 25 行)进行分页,但我不知道如何实现它。有人知道怎么做吗?
如果用户到达 25 行的末尾并且还有更多行,我想加载它并显示它。
这是我的 HTML 模板
<div class="form-group">
{!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}
</div>
这里是 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
}
});
这是我的控制器代码
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);
}
另外,当我尝试输入 params.page
时,它显示 "undefined"。
Select2支持通过processResults
出来的pagination
键使用远程数据时分页。
对于无限滚动,pagination
对象应该有一个 more
属性,它是一个布尔值(true
或 false
)。这将告诉 Select2 是否应该在到达底部时加载更多结果,或者是否已到达结果末尾。
{
results: [array, of, results],
pagination: {
more: true
}
}
就您而言,您有能力塑造结果。因此,您实际上可以更改 JSON 响应以匹配预期格式,这意味着您甚至不需要使用 processResults
.
如果将ajax.data
函数修改为return,Select2可以将页码作为page
传入。
data: function(params) {
return {
term: params.term || "",
page: params.page || 1
}
},
然后您将能够使用Input::get('page')
获取页面。您可以使用 (page - 1) * resultCount
计算要跳过的结果总数,其中 resultCount
在您的情况下是 25
。这将允许您修改查询以组合 LIMIT
和 OFFSET
以获得您需要的结果。
$page = Input::get('page');
$resultCount = 25;
$offset = ($page - 1) * $resultCount;
并且您可以使用以下查询生成 LIMIT
/ OFFSET
查询(基于 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')]);
所以现在 $breeds
将只包含请求的结果。剩下要做的唯一一件事就是调整响应以匹配 Select2 的预期方式。您可以通过检查结果总数并查看是否 运行 超出限制来确定是否还有更多页面。
$count = Breed::count();
$endCount = $offset + $resultCount;
$morePages = $endCount > $count;
所以现在 $morePages
应该是一个布尔值,这正是 Select2 在 pagination.more
中寻找的。现在您只需调整响应以匹配我之前提到的格式。
$results = array(
"results" => $breeds,
"pagination" => array(
"more" => $morePages
)
);
然后渲染
return response()->json($results);
把所有东西放在一起,你得到这个 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
}
});
以及您的控制器的以下内容
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);
}
我正在尝试使用 Select2 4.0 对结果(每 25 行)进行分页,但我不知道如何实现它。有人知道怎么做吗?
如果用户到达 25 行的末尾并且还有更多行,我想加载它并显示它。
这是我的 HTML 模板
<div class="form-group">
{!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}
</div>
这里是 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
}
});
这是我的控制器代码
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);
}
另外,当我尝试输入 params.page
时,它显示 "undefined"。
Select2支持通过processResults
出来的pagination
键使用远程数据时分页。
对于无限滚动,pagination
对象应该有一个 more
属性,它是一个布尔值(true
或 false
)。这将告诉 Select2 是否应该在到达底部时加载更多结果,或者是否已到达结果末尾。
{
results: [array, of, results],
pagination: {
more: true
}
}
就您而言,您有能力塑造结果。因此,您实际上可以更改 JSON 响应以匹配预期格式,这意味着您甚至不需要使用 processResults
.
如果将ajax.data
函数修改为return,Select2可以将页码作为page
传入。
data: function(params) {
return {
term: params.term || "",
page: params.page || 1
}
},
然后您将能够使用Input::get('page')
获取页面。您可以使用 (page - 1) * resultCount
计算要跳过的结果总数,其中 resultCount
在您的情况下是 25
。这将允许您修改查询以组合 LIMIT
和 OFFSET
以获得您需要的结果。
$page = Input::get('page');
$resultCount = 25;
$offset = ($page - 1) * $resultCount;
并且您可以使用以下查询生成 LIMIT
/ OFFSET
查询(基于 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')]);
所以现在 $breeds
将只包含请求的结果。剩下要做的唯一一件事就是调整响应以匹配 Select2 的预期方式。您可以通过检查结果总数并查看是否 运行 超出限制来确定是否还有更多页面。
$count = Breed::count();
$endCount = $offset + $resultCount;
$morePages = $endCount > $count;
所以现在 $morePages
应该是一个布尔值,这正是 Select2 在 pagination.more
中寻找的。现在您只需调整响应以匹配我之前提到的格式。
$results = array(
"results" => $breeds,
"pagination" => array(
"more" => $morePages
)
);
然后渲染
return response()->json($results);
把所有东西放在一起,你得到这个 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
}
});
以及您的控制器的以下内容
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);
}