0

目前我正在使用淘汰赛 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);
};

在 Knockout 文件中滚动 JS

$(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();
        }
    }
});
4

1 回答 1

0

koGrid.js 是为此而构建的，但服务器必须计算项目的数量。我们将此工具用于具有超过 20K 条目并且没有性能影响的表。查询在一秒钟内执行。

于 2013-04-15T04:06:21.470 回答