0

現在、私はノックアウト js を使用してユーザーをページに表示しています。ユーザー数が 250 ユーザーを超える可能性があるため、一度に 250 人すべてをロードしたくありません。時間がかかる。スクロール機能を使用するので、ユーザーがスクロールすると、表示するユーザーが増えます。

現在のコードは、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 を超えるエントリを持つテーブルでこのツールを使用し、パフォーマンスへの影響はありません。クエリは 1 秒未満で実行されます。

于 2013-04-15T04:06:21.470 に答える