我试图使用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”.
解决方法
通过从processResults中出现的分页键,使用远程数据时,Select2支持分页.
对于无限滚动,分页对象预期具有更多的属性,它是一个布尔值(true或false).这将告诉Select2是否应在到达底部时加载更多结果,或者如果达到结果的结尾.
{
results: [array,of,results],pagination: {
more: true
}
}
在你的情况下,你有能力塑造你的结果.所以你可以改变你的JSON响应以匹配预期的格式,这意味着你甚至不需要使用processResults.
如果您修改ajax.data函数以返回它,则Select2可以将页码作为页面传递.
data: function(params) {
return {
term: params.term || "",page: params.page || 1
}
},
然后你可以使用Input :: get(‘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','%' . Input::get("term"). '%')->orderBy('name')->skip($offset)->take($resultCount)->get(['id',DB::raw('name as text')]);
所以现在,品种只会包含所要求的结果.唯一需要做的是设置响应,以匹配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...',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',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);
}
