如何修改此 Select2 javascript 以启用分页？

Question

我对javascript不太熟悉，所以在这里需要帮助。我有这个方法返回一个客户列表（2000+），所以 Select2 下拉列表挂起。我想启用分页，但我不确定我需要更改什么。这是我的javascript代码：

var GetCutomerDDL = function(cient) {

    var Json = {},
        customers = [];

    $ddlCustomers.select2('val', '');
    Json.client = cient;

    $.post(urlContent + 'Cutomer/GetCustomerDDL', Json, function(data) {
    }, 'json').done(function(data) {
        customers = data;
        $ddlCustomers.select2({
            placeholder: "Select Customer(s)",
            allowClear: true,
            multiple: true,
            data: customers
        });
    });

};

GetCustomerDDL 使用 LINQ 仅返回所有客户，但我想启用分页，因此不要一次在下拉列表中加载超过 2000 条记录。我需要在 javascript 和服务器端更改什么？

Answer 1

Select2 控件包括"infinite scrolling"。这可能就是您正在寻找的。​​p>

Scroll2的主页在这里：http://select2.github.io/

在服务器端，您需要使用Skip() 和Take() LINQ 运算符来向前跳过数据并从数据中仅获取一定数量的项目。 Select2 应该将要跳过的项目传递给您的控制器。

编辑：

尝试改变这个：

$.post(urlContent + 'Cutomer/GetCustomerDDL', Json, function(data) {
}, 'json').done(function(data) {
    customers = data;
    $ddlCustomers.select2({
        placeholder: "Select Customer(s)",
        allowClear: true,
        multiple: true,
        data: customers
    });
});

到这里：

$ddlCustomers.select2({
    ajax: {
      url: urlContent + 'Cutomer/GetCustomerDDL',
      dataType: 'json',
      data: function (term, page) {
        return {
          q: term, // search term
          pageLimit: 10,
          page: page, // page number
          client: client
        };
      },
      results: function (data, page) {
        var more = (page * 10) < data.total; // whether or not there are more results available
        return { results: data.customers, more: more };
      }
    },
});

在您的控制器上，您需要在“customers”属性中返回客户子列表​​，在“total”属性中返回客户总数。

return Json(new { customers = customers.Skip(...).Take(...), 
  total = customers.Count() }, JsonRequestBehavior.AllowGet);

示例 json 结果：

{ customers: [...], total: 2000 }