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

Posted 2023-05-07

【中文标题】如何修改此 Select2 javascript 以启用分页？

【英文标题】：How can I modify this Select2 javascript to enable paging?

【发布时间】：2013-05-27 14:09:45

【问题描述】：

我对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 和服务器端更改什么？

【参考方案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 

【讨论】：

我知道如何处理服务器端，我正在查看 Select2 的主页，但我不知道如何修改 javascript。

Select2 页面有一个用于无限加载的示例 javascript。关键是正确设置ajax 属性（url、data、results 等）

是的，我看到了，因为我不熟悉 javascript，所以即使有 Select2 帮助，我也不确定在我的示例中在哪里设置。

我已经用一些示例代码更新了我的答案。希望它有所帮助。

它现在告诉我萤火虫控制台中的数据为空。在我能够将客户端值从 javascript 传递到我的控制器方法之前，但现在不存在。我的 Json 对象怎么了？