Question

在文档页面上没有服务器端说明。我很困惑，我想解决我的问题，并可能使用服务器端和客户端代码进行引用。

我正在尝试将select2（使用v.4.0）无限滚动分页作为搜索框，但与<div class ="col-sm-3 col-xs-6"> <div class="col-sm-12 col-xs-12">1</div> <div class="col-sm-12 col-xs-12">2</div> <div class="col-sm-12 col-xs-12">5</div> <div class="col-sm-12 col-xs-12">6</div> </div> <div class ="col-sm-3 col-xs-6"> <div class="col-sm-12 col-xs-12">3</div> <div class="col-sm-12 col-xs-12">4</div> <div class="col-sm-12 col-xs-12">7</div> <div class="col-sm-12 col-xs-12">8</div> </div>混淆。如何将该参数作为查询请求获取并返回无限滚动的页码。无限滚动如何触发？以下是我的代码，我只能获得10个结果。

我的代码的HTML部分是;

params.page

JS部分是;

<select id="search_products" name="q"></select>

服务器端 - PHP部分（jQuery('#search_products').select2({ ajax: { url: "search_results.php", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term page_limit: 10, page:params.page }; }, processResults: function (data, params) { params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total } }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, minimumInputLength: 3, templateResult: formatRepo, templateSelection: formatRepoSelection }); function formatRepo (repo) { if (repo.loading) return repo.adi; var markup = '<div class="clearfix">' + '<div class="col-sm-7">' + repo.name + '</div>' + '<div class="col-sm-4"><i class="fa fa-barcode"></i> ' + repo.barkod + '</div>'; return markup; } function formatRepoSelection (repo) { return repo.adi; }）是：

search_results.php

Answer 1

您的代码存在问题，无论是在客户端还是服务器端。

在客户端，尝试替换它：

data: function (params) {
    return {
        q: params.term, // search term
        page_limit: 10,
        page:params.page
    };
},
processResults: function (data, params) {
    params.page = params.page || 1;
    return {
        results: data.items,
        pagination: {
            more: (params.page * 30) < data.total           
        }
    }
};

为此：

var limit_rows = 10;
...
data: function (params) {
    return {
        q: params.term, // search term
        page_limit: limit_rows,
        page:params.page
    };
},
processResults: function (data, params) {
    params.page = params.page || 1;
    return {
        results: data.items,
        pagination: {
            more: (params.page * limit_rows) < data.total           
        }
    }
};

这样，select2将正确解析页面限制，相应地解析＆＃34; limit_rows＆＃34;变量。请注意，我为＆＃34; limit_rows＆＃34;更改了30; var，inside＆＃34; processResults＆＃34;方法，现在该字段每次搜索正确显示10个结果。

在服务器端，有两个问题：

你的总数是错的。您需要在查询中返回没有LIMIT的总行数。这样就可以避免返回总数与页数限制中的值（在您的情况下为10）。
您的数组以json的形式返回时缺少一些信息。尝试更改此内容：

echo json_encode（阵列（＆＃39;项目＆＃39; =＆GT; $项目，＆＃39;总＆＃39; =＆GT;计数（$曲）＆＃39;页面＆＃39; =＆GT; $页））;

为此：

echo json_encode(
    array(
        'incomplete_results' => false,
        'items' => $items,
        'total' => count($qu) // Total rows without LIMIT on your SQL query
);

这对我有用。

如何在服务器端和客户端进行Select2 infitine滚动分页

1 个答案: