1

在文档页面上没有服务器端解释。正如我所困惑的那样，我想解决我的问题，也许可以参考服务器端和客户端代码。

我正在尝试将 select2（使用 v.4.0）无限滚动分页作为搜索框，但与params.page. 如何将该参数作为查询请求获取并返回页码以进行无限滚动。无限滚动如何触发？以下是我的代码，我只能得到 10 个结果。

我的代码的 HTML 部分是；

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

JS部分是；

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

服务器端 - PHP 部分 ( search_results.php) 是：

if (isset($_REQUEST['q']) && !empty($_REQUEST['q'])) {

    $q = getVar('q', 'anp'); //getVar is my custom sanitation function
    $pglm = getVar('page_limit', 'int');
    $page_lim = (empty($pglm) ? 10 : $pglm);
    $pg = getVar('page', 'int');
    $page =  (empty($pg) ? 0 : $pg);
    $sira = $page*$page_lim;

    //using MYSQL, querying with custom database query class $db
    $qu = $db->get_results("
                    SELECT * FROM  `products` 
                    WHERE  `adi` LIKE  '%$q%'
                    OR  `ozellikleri` LIKE  '%$q%'
                    OR  `ozet` LIKE  '%$q%'
                    OR  `barkod` LIKE  '%$q%' LIMIT $sira, $page_lim
                    ");

    if($qu && count($qu) > 0) {
        foreach ($qu as $oqu) {
            $items[] = array('name' => $oqu->adi, 'id' => $oqu->id,  'barkod' => $oqu->barkod);
            } 

        echo json_encode(array('items' => $items, 'total' =>  count($qu), 'page' => $page));
    }   
}
4

1 回答 1

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 将根据“limit_rows”变量正确解析页面限制。请注意，我在“processResults”方法中为“limit_rows”变量更改了 30，现在该字段每次搜索正确显示 10 个结果。

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

  • 你的总数是错误的。您需要在查询中返回没有 LIMIT 的总行数。这将避免返回总页数限制中的值（在您的情况下为 10）。

  • 您作为 json 返回的数组缺少一些信息。尝试改变这个：

    echo json_encode(array('items' => $items, 'total' => count($qu), 'page' => $page) );

为了这：

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

这对我有用。

于 2015-09-25T13:59:09.073 回答