CODEWITHSUNDEEP
knockout.jspagination
Pluto
Pluto

Reputation: 31

Knockout paging

I have a viewmodel with paging functions which maintain pageIndex property. Viewmodel has a pages array with pages. Each page has its own pageNumber property.

paging code of my viewmodel:

//paging
pageIndex: ko.observable(),
pageSize: ko.observable(),
pageCount: ko.observable(),
pages: ko.observableArray([]),
nextPage: function () {
    alert("Next");
    this.pageIndex = this.pageIndex + 1;
    alert(this.pageIndex);
},
previousPage: function () {
    //alert("PRev");
    this.pageIndex = this.pageIndex - 1;
    alert(this.pageIndex);
},
gotoPage: function (page) {
    //alert("GO:" + page.pageNumber);
    this.pageIndex = page.pageNumber;
    alert(this.pageIndex);
},

In my view, I have a nested list as:

<nav id="paging">
<ul class="paginationList">
    <li class="paginationList" data-bind="visible: pageIndex > 0">
        <a href="#" data-bind="click: previousPage"><<</a>
    </li>
</ul>
<ul class="paginationList" data-bind="foreach: pages">
    <li class="paginationList">
            <a href="#" data-bind="click: $parent.gotoPage, css: { disabled: $parent.pageIndex == $data.pageNumber }, text: $data.pageNumber"></a>     
    </li>
</ul>
<ul class="paginationList">
    <li class="paginationList" data-bind="visible: pageIndex < pageCount">
        <a href="#" data-bind="click: nextPage">>></a>
    </li>
</ul>

Its works, but when click "Next" function pageIndex changes but the anchors disabled state doesn't change.

I cant resolve why it happens.

Upvotes: 2

Views: 2661

Answers (1)

meze
meze

Reputation: 15097

pageIndex isn't a property but a function. Set it as:

this.pageIndex(page.pageNumber);

Upvotes: 6

Related Questions