Paging for a Table using Knockout JS with Bootstrap

Question

Hi,

 

I am getting data on page load and was able to bind the data to Bootstrap Table. Now I have to do paging for that table.

 

I tried many ways and able to get the page numbers but when I click on those page numbers, data was not getting load based on page.

 

here is my code 

 

function viewModel(){

var self = this; 

self.ContractCommissions = ko.observableArray(); 

self.pageSize = ko.observable(5);

self.pageIndex = ko.observable(0);

self.pagedList = ko.dependentObservable(function () {

var size = self.pageSize();

var start = self.pageIndex() * size;

return self.ContractCommissions.slice(start, start + size);

});

self.maxPageIndex = ko.dependentObservable(function () {

return Math.ceil(self.ContractCommissions().length / self.pageSize()) - 1;

});

self.previousPage = function () {

if (self.pageIndex() > 0) {

self.pageIndex(self.PageIndex() - 1);

}

};

self.nextPage = function () {

if (self.pageIndex() < self.maxPageIndex()) {

self.pageIndex(self.pageIndex() + 1);

}

};

self.moveToPage = function (index) {

self.pageIndex(index);

};

self.allPages = ko.dependentObservable(function () {

var pages = [];

for (var i = 0; i <= self.maxPageIndex(); i++) {

pages.push({ pageNumber: (i + 1) });

}

return pages;

});

} 

 

MyCommissionViewModel.prototype.init = function () {

var self = this;

$.ajax({

url: "../Commissions/GetMyCommissions",

type: "POST",

contentType: "application/json; charset=utf-8",

data: "{ UserID: '13', PMCID: '1952220'}",

success: function (data) {

//self.CommissionsList.pushAll(self._map(data));

self.ContractCommissions.pushAll(self._map(data, "Contract"));

self.RevenueCommissions.pushAll(self._map(data, "Revenue"));

}

});

};

MyCommissionViewModel.prototype._map = function (myCommissions, commType) {

var mappedCommissions = [];

for (var i = 0; i < myCommissions.length; i++) {

if (myCommissions[i].CommType == commType) {

var mycom = new MyCommission();

mycom.PMCID = myCommissions[i].PMCID;

mycom.SiteID = myCommissions[i].SiteID;

mycom.UnitID = myCommissions[i].UnitID;

mycom.SiteName = myCommissions[i].SiteName;

mycom.UnitName = myCommissions[i].UnitName;

mycom.CommAmount = myCommissions[i].CommAmount;

mycom.UserID = myCommissions[i].UserID;

mycom.UserName = myCommissions[i].UserName;

mycom.Status = myCommissions[i].Status;

mycom.CommPlanName = myCommissions[i].CommPlanName;

mycom.CommType = myCommissions[i].CommType;

mappedCommissions.push(mycom);

}

}

return mappedCommissions;

}

$(document).ready(function () {

ko.observableArray.fn.pushAll = function (valuesToPush) {

var underlyingArray = this();

this.valueWillMutate();

ko.utils.arrayPushAll(underlyingArray, valuesToPush);

this.valueHasMutated();

return this;

}

var viewModel = new MyCommissionViewModel();

ko.applyBindings(viewModel);

viewModel.init();

});

 

Can some body help me on this how can we able to do the paging...??

 

 

Thanks in Advance,

Murali Krishna.