Javascript 调整knockout js中用户数组的显示

目前，我正在使用knockout js将用户显示到页面中，因为用户数量可能超过250个，我不想一次加载所有250个用户，因为1-它不能一次全部装入第2页-这需要时间。我将使用滚动功能，因此当用户滚动时，我将加载更多用户以显示

当前代码获取所有用户的长度，可能是250或500，然后每页显示20，并分页到最后

问题我想更改代码，以便它只需拉动前20个用户即可显示，当用户滚动时，它将抓取下20个用户，而无需在加载前统计所有用户

淘汰赛JS

 var _rosterUsers = new Array();

$.views.Roster.RosterViewModel = function (data) {
    var self = this;
    self.RosterUsers = ko.observableArray([]);
    _rosterUsers = self.RosterUsers;
    self.currentPage = ko.observable(1);
    self.toDisplay = ko.observable(20);
    filteredRoster = ko.computed(function(){
        var init = (self.currentPage()-1)* self.toDisplay(),
            filteredList = [],
            rosterLength = self.RosterUsers().length,
            displayLimit = self.toDisplay();
        if(rosterLength == 0)
            return[];
        for(var i = init; i<(displayLimit + init) - 1 && i<rosterLength; i++)
        {
            filteredList.push(self.RosterUsers()[i]);
        }
        return filteredList;
    }),
    totalRoster = ko.computed(function () {
        return self.RosterUsers().length;
    }),
    changePage = function (data) {
        self.currentPage(data);
    },
    next = function () {
        if ((self.currentPage() * self.toDisplay()) > self.RosterUsers().length)
            return;

        self.currentPage(self.currentPage() + 1);
    },
    prev = function () {
        if (self.currentPage() === 1)
            return;

        self.currentPage(self.currentPage() - 1);
    },

    $.views.Roster.RosterViewModel.AddUsers(data);
};

var\u rosterUsers=new Array（）；
$.views.LOSTER.RosterViewModel=函数（数据）{
var self=这个；
self.rosteruser=ko.observearray（[]）；
_名册=自我名册；
self.currentPage=ko.可观察（1）；
self.toDisplay=ko.可观察（20）；
filteredRoster=ko.computed（函数（）{
var init=（self.currentPage（）-1）*self.toDisplay（），
filteredList=[]，
rosterLength=self.RosterUsers（）.长度，
displayLimit=self.toDisplay（）；
如果（花名册长度==0）
返回[]；
for（var i=init；ikoGrid.js是为此构建的，但服务器必须计算项目的数量。我们将此工具用于具有超过20K个条目且没有性能影响的表。查询在不到一秒钟的时间内执行

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        if (parseInt($.views.Roster.RosterViewModel.currentPage(), "10") * 20 < parseInt($.views.Roster.RosterViewModel.totalRoster(), "10")) {
            $.views.Roster.RosterViewModel.next();
        }
    }
});