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

我对JavaScript不太熟悉，所以我需要帮助。我有这个方法返回客户列表（2000+），所以Select2下拉菜单挂起。我想启用分页功能，但我不确定需要更改哪些内容。这里是我的javascript代码：如何修改此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 to刚刚返回所有客户，但我想启用分页所以在下拉列表不会加载超过2000条记录一次。我需要在JavaScript和服务器端进行更改？

来源

2013-05-31 Xaisoft

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

在你的控制，你会想返回客户的子列表“客户”资产以及“全部”资产中的总客户。

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

样品JSON结果：

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

来源

2013-05-31 17:38:51

我知道如何处理服务器端和我一直在寻找的网页，供选择二，但我不如何修改的JavaScript。 – Xaisoft

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

是的，我看到了，因为我对javascript不熟悉，所以我不确定在哪里设置这些属性在我的例子中，即使使用Select2帮助。 – Xaisoft

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

回答

相关问题