选择2 v4如何使用AJAX对结果进行分页

Question

我正在尝试使用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它说成"未定义"时.

Answer 1

当通过出来的pagination密钥使用远程数据时,Select2支持分页processResults.

对于无限滚动,该pagination对象应具有more一个布尔(true或false)属性.这将告诉Select2是否应该在到达底部时加载更多结果,或者它是否已达到结果的末尾.

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

在您的情况下,您可以塑造结果.因此,您实际上可以更改JSON响应以匹配预期的格式,这意味着您甚至不需要使用processResults.

Select2可以传入页码,page就像您修改ajax.data函数以返回它一样.

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查询(基于此Stack Overflow问题.

$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);
}