Select2 Ajax Laravel 5.2 - 分页结果不起作用？

Posted 2021-05-01

我有以下select2加载带分页的远程数据：

$(".js-location-lookup").select2({
    ajax: {
        url: '/locations',
        dataType: "json",
        delay: 150,
        data: function (params) {
            return {
                term: params.term, 
                page: params.page
            };
        },
        processResults: function (data, params) {

            params.page = params.page || 1;

            return {
                results:  $.map(data.data, function (item) {
                    return {
                        id: item.id,
                        text: item.name

                    };
                }),
                pagination: {
                    more: (params.page * data.per_page) < data.total
                }

            };
        },
        cache: true
    },
    minimumInputLength: 2,
    placeholder: "-- Select --",
    allowClear: true
});

控制器动作：

 public function getLocations(Request $request)
{
    $term = $request->input('term');

    $data = Location::where('name', 'LIKE', '%'.$term.'%')->paginate(5);

    $data->appends(['term' => $term ]);

    return response()->json($data);

}

json：

{
   "total":22,
   "per_page":5,
   "current_page":1,
   "last_page":5,
   "next_page_url":"/locations?term=en&page=2",
   "prev_page_url":null,
   "from":1,
   "to":5,
    "data":[
        {"id":1,"name":"England"},
        {"id":13,"name":"London (Central)"},
        {"id":18,"name":"North East England"},
        {"id":23,"name":"North West England"},
        {"id":30,"name":"South East England"}
     ]
  }

只有第一页加载并显示文本load more results但它不滚动或做任何事情来显示下一组结果？

答案

如果显示的每页项目数小于打开时下拉框的高度，则选择小部件上的滚动条不会出现，并且会观察到上述行为，即您无法滚动以加载下一组数据的。

修复是将页面分页数增加到每页10页，以便它们超过下拉框的高度。

不确定你是否会将此作为一个错误。

另一答案

将以下代码与最新的select2版本库一起使用。

控制器代码：

public function getLocations(Request $request)
{
    if ($request->ajax()) {
        $page = $request->page;
        $resultCount = 5;

        $offset = ($page - 1) * $resultCount;

        $locations = Location::where('name', 'LIKE', '%' . $request->term. '%')
                                ->orderBy('name')
                                ->skip($offset)
                                ->take($resultCount)
                                ->selectRaw('id, name as text')
                                ->get();

        $count = Count(Location::where('name', 'LIKE', '%' . $request->term. '%')
                                ->orderBy('name')
                                ->selectRaw('id, name as text')
                                ->get());

        $endCount = $offset + $resultCount;
        $morePages = $count > $endCount;

        $results = array(
              "results" => $locations,
              "pagination" => array(
                  "more" => $morePages
              )
          );

        return response()->json($results);
    }
    return response()->json('oops');
}

查看/ JS代码：

$(document).ready(function() {
    $('.js-location-lookup').select2({
        delay : 200,
        ajax: {
            url: '/locations',
            dataType: 'json',
            cache: true,
            data: function(params) {
              return {
                  term: params.term || '',
                  page: params.page || 1
              }
          },
        }
    });
});