knockoutjs ajax分页,knockout js实现分页列表

​时隔多年，今日说下刚搞的这个mvvw模式开发的js

js获取后台数据——>保存在js模型中——>渲染到html标签

举例：

$(document).ready(function () {

​

function AppViewModel()

{

var self = this,pagerCount =

8;

self.resultData =

ko.observable([]); // No initial value

self.total =

ko.observable('');

self.totalpage =

ko.observable('');

self.page =

ko.observable('');

self.pagesize =

ko.observable('');

self.pages =

ko.observable([]);

self.showStartPagerDot =

ko.observable(false);//页面开始部分是否显示点号

self.showEndPagerDot =

ko.observable(false);//页面结束部分是否显示点号

self.getData =

function(){

$('#list').show();

self.jumppage(1);

};

//首页

self.getFirst =

function(){

self.jumppage(1);

};

//下一页

self.getNext = function(){var

cur = self.page(); if (cur < self.totalpage()) {

self.jumppage(parseInt(cur)+1); };};

//上一页

self.getPre = function(){var

cur = self.page(); if (cur > 1) {

self.jumppage(parseInt(cur) - 1); };};

//末页

self.getLast =

function(){self.jumppage(self.totalpage());};

self.jumppage =

function(page){

self.selectsub(page);

};

self.caculatePages = function

() {

var result = [], start = 1, end =

pagerCount;

if (self.page() >= pagerCount)

{

start = self.page() - Math.floor(pagerCount /

2);

self.showStartPagerDot(true);

} else {

self.showStartPagerDot(false);

};

end = start + pagerCount -

1;

if (end > self.totalpage())

{

end =

self.totalpage();

self.showEndPagerDot(false);

} else {

self.showEndPagerDot(true);

};

for (var i = start; i <= end;

i++) {

result.push(i);

};

self.pages(result);

};

self.selectsub  =

function(page){

$("#searchform").ajaxSubmit({

data:{page:page},

success: function (oProdsData, status)

{

var json = eval_r("(" + oProdsData +

")");

var trs =

json.data.list;

if(json.status == 200 && trs.length

> 0){

self.total(json.data.total);

self.totalpage(json.data.totalPage);

self.page(json.data.page);

self.pagesize(json.data.epage);

self.caculatePages();

for($i =

0;$i

trs[$i]['listtableClass'] =

$i % 2 ? false : true;

if($i==(trs.length-1))

{

trs[$i]['islastPageData'] = true;

}

else{trs[$i]['islastPageData'] = false;}

}

self.resultData(trs);

}else{

self.total(0);

}

return false;

},

error : function(XMLResponse)

{

alert('哥~~，请不要这样神操作，请求过于频繁！！');

}

});

return false;

};

$('#list').show();

self.jumppage(1);

}

//对应vmProd的对象及合

ko.applyBindings(new AppViewModel());

});

​html如下：

填写图片摘要(选填)

​​

​例子中的数据根据个人需要来拟定。