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

我正在尝试使用Select2 4.0分页结果（每25行），但我不知道如何实现它。 有人知道怎么做吗？

如果用户到达25行的末尾，并且如果有更多行，我想加载它并显示它。

这是我的HTML模板

 {!! Form::select('breed_id', $breeds, null, ['class' => 'form-control', 'id' =>'breed_id'] ) !!}  

这是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”时。

Answer 1

当通过processResults出现的pagination键使用远程数据时，Select2支持分页。

对于无限滚动， pagination对象应该具有more属性，该属性是布尔值（ true或false ）。 这将告诉Select2当到达底部时是否应该加载更多结果，或者它是否已达到结果的末尾。

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

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

如果您修改ajax.data函数以返回它，则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查询（基于此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); }