我如何修改这个Select2 javascript来启用分页?

How can I modify this Select2 javascript to enable paging?

本文关键字：javascript Select2 启用 分页 何修改 修改      更新时间：2023-09-26

我不太熟悉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和服务器端改变什么?

Select2控件包括"infinite scrolling"。这可能就是你要找的。

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 }
相关文章：