使用Knoctout.分页
要点:点击标签翻页部分时,pageValue自动加1.
1、api中的方法
public ArticleListModel Get(int page,string _class) { var list = new ArticleListModel { Articles = GetArticle(_class).Skip(6*(page - 1)).Take(6).ToList(), CurPage = page }; //DAL.ApolloEntities entities = new ApolloEntities(); int count = db.Articles.Count(p => p.Class == _class); int pages; if (count % 6 == 0) pages = count / 6; else { pages = count / 6 + 1; } list.Page = new List<PageModel>(); //for (int i = 0; i < pages; i++) //{ list.Page.Add(new PageModel { PageText = "上一页", PageValue = page - 1 }); if (page <= pages-1) { list.Page.Add(new PageModel {PageText = "下一页", PageValue = page + 1}); } else { list.Page.Add(new PageModel { PageText = "下一页", PageValue = page }); } //} return list; }
2、前台databind
<div class="floatright"> <div class="pagination pagination-centered"> <ul data-bind="foreach: pages"> <a href="#" data-bind="click: $root.ChangePage, text: PageText"></a>   </ul> </div> </div>
3、前台js处理
<script type="text/javascript"> function ReSizePic(ThisPic) { var RePicWidth = 253; //这里修改为想显示的宽度值 var TrueWidth = ThisPic.width; //图片实际宽度 var TrueHeight = ThisPic.height; //图片实际高度 var Multiple = TrueWidth / RePicWidth; //图片缩小(放大)的倍数 ThisPic.width = RePicWidth; //图片显示的可视宽度 ThisPic.height = TrueHeight / Multiple; //图片显示的可视高度 } function ArticleViewModel() { var self = this; var lists; var pages; self.ChangePage = function (page) { $.getJSON("/api/Articles", { page: page.PageValue, _class: "联合动态" }, function (data) { var i = 0; $("#divID")[0].innerHTML = ""; $.each(data.Articles, function (i, v) { if (i == 3) { $("#divID")[0].innerHTML += "</br></br></br>"; } $("#divID")[0].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>"; $("#divID")[0].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>"; $("#divID")[0].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>"; $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id }); $("#image" + i).attr({ src: v.Img }); $("#p" + i)[0].textContent = v.Title; $("#pl" + i)[0].textContent = v.Time.toString().substring(0, 9); i++; } ); self.pages.removeAll(); $.each(data.Page, function (i, v) { self.pages.push(v); }); }); }; } var viewModel = new ArticleViewModel(); $.getJSON("/api/Articles", { page: 1, _class: "联合动态" }, function (data) { var i = 0; $("#divID")[0].innerHTML = ""; $.each(data.Articles, function (i, v) { if (i == 3) { $("#divID")[0].innerHTML += "</br></br></br>"; } $("#divID")[0].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>"; $("#divID")[0].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>"; $("#divID")[0].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>"; $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id }); $("#image" + i).attr({ src: v.Img }); $("#p" + i)[0].textContent = v.Title; $("#pl" + i)[0].textContent = v.Time.toString().substring(0, 9); i++; }); viewModel.lists = ko.observableArray(data.Articles); viewModel.pages = ko.observableArray(data.Page); ko.applyBindings(viewModel); }); </script>