Question

我有以下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，但它不会滚动或做任何事情来显示下一组结果？

Answer 1

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

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

不确定您是否将此类视为错误。

Answer 2

将以下代码与最新的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
              }
          },
        }
    });
});

Answer 3

public function getdataforselect2(Request $request){

        if ($request->ajax()) {

            $term = trim($request->term);
            $posts = DB::table('channels')->select('id','name as text')
                ->where('name', 'LIKE',  '%' . $term. '%')
                ->orderBy('name', 'asc')->simplePaginate(10);

            $morePages=true;
          // $pagination_obj= json_encode($posts);
           if (empty($posts->nextPageUrl())){
            $morePages=false;
           }
            $results = array(
              "results" => $posts->items(),
              "pagination" => array(
                "more" => $morePages
              )
            );

            return \Response::json($results);
        }
    }

    <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <!--<![endif]-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script >

(function() {

  $("#channel_id").select2({
    placeholder: 'Channel...',
    // width: '350px',
    allowClear: true,
    ajax: {
        url: '/dataforselect2',
        dataType: 'json',
        delay: 250,
        data: function(params) {
            return {
                term: params.term || '',
                page: params.page || 1
            }
        },
        cache: true
    }
});
})();

    </script>

代码here！

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

3 个答案:

控制器代码：

查看/ JS代码：