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.
Murali krishna AndePosted Apr 3, 2014, 8:41 AM
var size = self.pageSize();
var start = self.pageIndex() * size;
return self.ContractCommissions.slice(start, start + size);
});
this is my paged list binding. If I give this on table foreach: i am not able to do the sorting.
if I have give ContractCommissions I can able to do sorting.
Jaganathan BantheswaranPosted Apr 3, 2014, 8:18 AM