jquery – Select2 v4如何使用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”.

解决方法

通过从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);
}

jquery – Select2 v4如何使用AJAX分页结果

解决方法

猜你在找的jQuery相关文章