使用knockout js滚动显示分页

scroll display pagination with knockout js

本文关键字：显示 分页 滚动 js knockout 使用      更新时间：2023-09-26

我想使用knockout js来启用滚动分页


我想在url和id传递到我的' GetPage(控制器，id#，页#))目前它是硬编码，但我想改变这一点。

淘汰赛js 

   $.views.Roster.GetPage = function (url, id, pageNumber) {
        $.grain.Ajax.Get({
            Url: url,
            SectionID: {id:id},
            DataToSubmit: { pageNumber: pageNumber, id: id },
            DataType: "json",
            OnSuccess: function (data, status, jqXHR) {
                $.views.Roster.RosterViewModel.AddUsers(data);
            }
        });
    };
Next = function () {
        var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
        $.views.Roster.ViewModel.CurrentPage(_page);
        $.views.Roster.GetPage("/api/Roster", 9, _page);
    }

滚动分页

$(document).ready(function(){
    $('#main').scroll(function () {
        if ($('#main').scrollTop() >= $(document).height() - $('#main').height()) {
            $('#status').text('Loading more items...' + $.views.Roster.ViewModel.TotalRoster());
            if ($.views.Roster.ViewModel.RosterUsers() == null ) {
                $('#status').hide();
                $('#done').text('No more items...'),
                $('#main').unbind('scroll');
            }
            setTimeout(updateStatus, 2500);
        }
        //updateStatus();
    });
});

将getRoster函数中的数据更改为服务器函数期望您返回的数据。此外，删除代码$.views. roster。GetRoster，不再需要了。当你这样做的时候。applyBindings(新.views.Roster.RosterViewModel美元());您应该获得第一页的数据，随后，当您滚动时，视图模型上的next()调用将继续分页。逻辑都是你的。

$.views.Roster.RosterViewModel = function (data) {
    var self = this;
    self.RosterUsers = ko.observableArray([]);
    _rosterUsers = self.RosterUsers;
    self.currentPage = ko.observable(1);
    self.toDisplay = ko.observable(10);
    var 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)  && 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);
    },
    getRoster = ko.computed(function () {
        var data = {
            currentPage: self.currentPage(),
            pageSize: self.toDisplay()
        },
            $promise = _makeRequest(data);
        $promise.done(function (data) {
            var localArray = [];
            ko.utils.arrayForEach(data, function(d){
                localArray.push(new $.views.Roster.UserViewModel(d));
            });
            self.RosterUsers.push.apply(self.RosterUsers,localArray);
        });
    }),
        _makeRequest = function(data){
            return $.getJSON('your url here', data);
        };

};
相关文章：