基于KO+BootStrap+MVC实现的分页控件代码分享
JS：
///<referencepath="../knockout-3.2.0.js"/>
varViewModel=function(data){
varself=this;
self.ObjectList=ko.observableArray(data.ObjectList)
self.TotalCount=ko.observable(data.TotalCount);
self.PerCount=ko.observable(data.PerCount);
self.pageIndex=ko.observable(data.Index);
self.btns=ko.observableArray();
vargetData=function(wantIndex){
$.getJSON("/BaseInfor/GetList",
{
pageIndex:wantIndex,pageSize:self.PerCount()
},
function(data){
self.ObjectList(data.ObjectList);
self.TotalCount(data.TotalCount);
self.PerCount(data.PerCount);
self.pageIndex(data.Index);
});
}
self.btnClick=function(item){
getData(item);
}
self.perPageClick=function(){
varwantIndex=self.pageIndex()-1;
if(wantIndex<=0)return;
getData(wantIndex);
}
self.nextPageClick=function(){
varwantIndex=self.pageIndex()+1;
if(wantIndex-1>(self.TotalCount()/self.PerCount()))return;
getData(wantIndex);
}
self.firstPageClick=function(){
getData(1);
}
self.lastPageClick=function(){
getData(self.pageTotal());
}
ko.computed(function(){
self.pageTotal=ko.observable(Math.ceil((self.TotalCount()/self.PerCount())))
varpageCount=self.pageTotal();
varstart=(self.pageIndex()-5)>0?self.pageIndex()-5:0;
varend=(start+9)<pageCount?start+9:pageCount;
if(end==pageCount)
{varstart=(pageCount-9)>0?pageCount-9:0;;}
self.btns.removeAll();
for(vari=start;i<end;i++){
self.btns.push(ko.mapping.fromJS(i+1));
}
});
}
$(document).ready(function(){
$.getJSON("/BaseInfor/GetList",
{
pageIndex:1,pageSize:5
},
function(data){
ko.applyBindings(newViewModel(data));
});
});
HTML：
<tableclass="tabletable-striped"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>出生年月</th> <th>年龄</th> <th>民族</th> <th>身份证号</th> <th>入党时间</th> <th>工作时间</th> <th>籍贯</th> <th>出生地</th> <th>证件照</th> </tr> </thead> <tbody> <!--koforeach:ObjectList--> <tr> <tddata-bind="text:Name"></td> <tddata-bind="text:Gender"></td> <tddata-bind="text:BirthDate"></td> <tddata-bind="text:Age"></td> <tddata-bind="text:Nation"></td> <tddata-bind="text:IDNumber"></td> <tddata-bind="text:PartyTime"></td> <tddata-bind="text:WorkTime"></td> <tddata-bind="text:hail"></td> <tddata-bind="text:BirthAddress"></td> <tddata-bind="text:Photo"></td> </tr> <!--/ko--> </tbody> </table> <divclass="btn-toolbar"role="toolbar"> <divclass="btn-group"> <inputclass="btnbtn-success"type="button"value="<"data-bind="click:perPageClick"/> </div> <divclass="btn-group"> <inputclass="btnbtn-success"type="button"data-bind="value:'1',click:firstPageClick"/> </div> <divclass="btn-group"> <!--koforeach:btns--> <!--koif:$data==$parent.pageIndex()--> <buttonclass="btnbtn-success"type="button"data-bind="text:$data,click:$parent.btnClick"></button> <!--/ko--> <!--koifnot:$data==$parent.pageIndex()--> <buttonclass="btnbtn-default"type="button"data-bind="text:$data,click:$parent.btnClick"></button> <!--/ko--> <!--/ko--> </div> <divclass="btn-group"> <inputclass="btnbtn-success"type="button"data-bind="value:pageTotal,click:lastPageClick"/> </div> <divclass="btn-group"> <inputclass="btnbtn-success"type="button"value=">"data-bind="click:nextPageClick"/> </div> <divclass="btn-group"> <spandata-bind="text:TotalCount()+'条数据'"/> </div> </div> <scriptsrc="/Scripts/jquery-2.1.1.min.js"></script> <scriptsrc="/Scripts/knockout-3.2.0.js"></script> <scriptsrc="/Scripts/knockout.mapping.js"></script> <scriptsrc="/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> <linkhref="/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css"rel="stylesheet"/> <scriptsrc="/Scripts/BaseInfor/List.js"></script>
以上所述是小编给大家介绍的基于KO+BootStrap+MVC实现的分页控件代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！