使用Knoctout.分页
要点:点击标签翻页部分时,pageValue自动加1.
1、api中的方法
public ArticleListModel Get(int page,string _class)
{
var list = new ArticleListModel
{
Articles = GetArticle(_class).Skip(*(page - )).Take().ToList(),
CurPage = page
};
//DAL.ApolloEntities entities = new ApolloEntities();
int count = db.Articles.Count(p => p.Class == _class);
int pages;
if (count % == )
pages = count / ;
else
{
pages = count / + ;
}
list.Page = new List<PageModel>();
//for (int i = 0; i < pages; i++)
//{
list.Page.Add(new PageModel { PageText = "上一页", PageValue = page - });
if (page <= pages-)
{
list.Page.Add(new PageModel {PageText = "下一页", PageValue = page + });
}
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 = ; //这里修改为想显示的宽度值
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 = ;
$("#divID")[].innerHTML = "";
$.each(data.Articles, function (i, v)
{
if (i == )
{
$("#divID")[].innerHTML += "</br></br></br>";
} $("#divID")[].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";
$("#divID")[].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";
$("#divID")[].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>"; $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });
$("#image" + i).attr({ src: v.Img });
$("#p" + i)[].textContent = v.Title;
$("#pl" + i)[].textContent = v.Time.toString().substring(, );
i++;
}
); self.pages.removeAll();
$.each(data.Page, function (i, v) {
self.pages.push(v);
}); });
};
} var viewModel = new ArticleViewModel();
$.getJSON("/api/Articles", { page: , _class: "联合动态" }, function (data) {
var i = ;
$("#divID")[].innerHTML = "";
$.each(data.Articles, function (i, v) {
if (i == ) {
$("#divID")[].innerHTML += "</br></br></br>";
} $("#divID")[].innerHTML += "<a href='' id='a" + i + "' ><img id='image" + i + "' src='' onload='ReSizePic(this);' /></a>";
$("#divID")[].innerHTML += "<p class='bgcolor' id='p" + i + "'></p>";
$("#divID")[].innerHTML += "<p class='bgtext' id='pl" + i + "'></p>"; $("#a" + i).attr({ href: "/ReceptionArticle/Details/" + v.Id });
$("#image" + i).attr({ src: v.Img });
$("#p" + i)[].textContent = v.Title;
$("#pl" + i)[].textContent = v.Time.toString().substring(, );
i++;
});
viewModel.lists = ko.observableArray(data.Articles);
viewModel.pages = ko.observableArray(data.Page);
ko.applyBindings(viewModel);
});
</script>
使用Knoctout.分页的更多相关文章
- 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- JdbcTemplate+PageImpl实现多表分页查询
一.基础实体 @MappedSuperclass public abstract class AbsIdEntity implements Serializable { private static ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- NET Core-TagHelper实现分页标签
这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.cnblogs.com/wangrudo ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- php实现的分页类
php分页类文件: <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 pr ...
- C#关于分页显示
---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...
- JAVA 分页工具类及其使用
Pager.java package pers.kangxu.datautils.common; import java.io.Serializable; import java.util.List; ...
随机推荐
- MySQL复制应用中继日志解析
前言:SQL线程应用中继日志,在binlog_format是row格式的时候,是居于主键更新,下面结合一张图来证明 1.从一个大神那边得到一张图片,SQL线程应用中继日志流程,下面就实验验证一下:(P ...
- 液晶常用接口“LVDS、TTL、RSDS、TMDS”技术原理介绍
液晶常用接口“LVDS.TTL.RSDS.TMDS”技术原理介绍 1:Lvds Low-Voltage Differential Signaling 低压差分信号 1994年由美国国家半导体公司提出之 ...
- Visual C#每一次新版本的变化
What's New in Visual C# .NET 2003[Visual Studio .NET 2003] What's New in Visual C# 2005 What's New i ...
- poj2352Stars
http://poj.org/problem?id=2352 二维逆序数 按一个数排序 转化为1维的 之前用树状数组写过 这次用线段树敲了下 #include <iostream> #in ...
- Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation(贪心)
题目:http://codeforces.com/contest/389/problem/C 题意:给n个箱子,给n个箱子所能承受的重量,每个箱子的重量为1: 很简单的贪心,比赛的时候没想出来.... ...
- poj3255,poj2449
这里介绍怎么求k短路 A*搜索 估价函数f[i]=g[i]+h[i]; 在这里g[i]表示到达点i当前路径长,h[i]表示点i到达终点的最短距离 在搜索中,每次都取队列估价函数值最小的点,然后把它所能 ...
- BZOJ_1027_[JSOI2007]_合金_(计算几何+Floyd求最小环)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1027 共三种金属,\(m\)种材料,给出每种材料中三种金属的占比. 给出\(n\)种合金的三种 ...
- Android访问C#的WebService要注意的问题
@Overrideprotected String doInBackground(Object... params) { // 根据命名空间和方法得到SoapObject对象 SoapObject s ...
- linux测试题
http://www.2cto.com/os/201307/225399.html 2013最新linux运维面试题 在对linux基本知识的归纳总结之后,这里是一份linux的测试题.希望能帮助大 ...
- 打造自己的reset.css
http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...