web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景：webform或者mvc下实现插件快速分页
ps：我这里用的mvc开发的，数据库连接。用的ADO.NET实体数据模型
此案例下载地址（内含需要用到的一个插件与数据库）：http://download.csdn.net/detail/u011597071/9384578
效果图：
1.需要加载的框架
@*加载jquery框架*@
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
@*加载Tmpl分页控件*@
<script src="~/Scripts/jquery.tmpl.min.js"></script>
4.需要添加的类：
public class Pager
{
//上页
public string Pre { get; set; }
//下一页
public string Next { get; set; }
//首页
public string First { get; set; }
//末页
public string Last { get; set; }
//当前为第几页数据
public string Current { get; set; }
//总共页面
public string Count { get; set; }
}
3.前台代码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@*加载jquery框架*@
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
@*加载Tmpl分页控件*@
<script src="~/Scripts/jquery.tmpl.min.js"></script>
@*自定义分页模板*@
<script type="text/x-jquery-tmpl" id="pager">
<div>
<a href="javascript:Load(${First})">首页 </a>
<a href="javascript:Load(${Pre})">上一页</a>
<a href="javascript:Load(${Next})">下一页</a>
<a href="javascript:Load(${Last})">末页</a>
总共${Count}页/当前第${Current}页
</div>
</script>
<script>
$(function () {
//jquery框架载入后执行Load方法，并传入需要查询的页面1
Load(1);
});
function Load(pIndex) {
//执行一个ajax请求
$.ajax({
//请求的路径，并且传入需要查询的页面
url: "/Home/List/" + pIndex,
//返回的数据类型
dataType: "json",
//请求正常执行后调用的方法
success: function (result) {
//清空指定表格里面的数据
$("#tab").empty();
//这里返回的对象为json。所以需要遍历返回的键为rows的对象
//便利方法中i为索引，mod为值
$.each(result.rows, function (i, mod) {
//创建一行
var tr = "<tr><td>" + mod.Title + "</td></tr>";
//追加到tab里面
$("#tab").append(tr);
});
//清空id为paged的div里面的内容
$("#paged").empty();
//把id为pager的js模板调用tmpl方法并传入返回的json中的pager对象。追加到id为paged的div标签中
$("#pager").tmpl(result.pager).appendTo("#paged");
}
});
}
</script>
<style>
table {
border-collapse:collapse;
border:1px solid #0094ff;
}
tr {
border-collapse:collapse;
border:1px solid #0094ff;
}
</style>
</head>
<body>
<div>
<table id="tab"></table>
<div id="paged"></div>
</div>
</body>
</html>
4.后台代码
public class HomeController : Controller
{
BookShopPlusEntities db = new BookShopPlusEntities();
public ActionResult Index()
{
return View();
}
public ActionResult List(int id)
{
//指定每页多少条数据
int pageSize = ;
//获取books表下全部的数据
List<Books> list = db.Books.ToList();
//跳过数据中指定的条数(每页数乘当前页)，然后截取指定条数(每页多少条)的数据
List<Books> data = list.Skip((id - ) * pageSize).Take(pageSize).ToList();
//创建一个匿名类，防止死循环
var result = from b in data
select new
{
Title = b.Title,
Id = b.Id
};
//获取总共的页码(这里用的是三目法)
int pgCount = list.Count() % pageSize == ?list.Count() / pageSize : list.Count() / pageSize + ;
//创建一个Pager对象，并且调用SetPager方法为Pager对象赋值（传入当前页和总页数）
Pager pagerData = SetPager(id, pgCount);
//返回json
return Json(new { rows = result, pager = pagerData }, JsonRequestBehavior.AllowGet);
}
public Pager SetPager(int pid, int pgCount)
{
//创建对象
Pager pager = new Pager();
//为对象赋值
pager.Current = pid + "";
//调用PrePage，目的是防止当前页为1，但是用户还点上一页
pager.Pre = PrePage(pid) + "";
//调用NextPage，目的是防止当前页为最后一页，但是用户还点下一页导致的错误
pager.Next = NextPage(pid, pgCount) + "";
pager.First = "";
pager.Last = pgCount + "";
pager.Count = pgCount + "";
//最后返回对象
return pager;
}
public int PrePage(int pid)
{
if (pid == )
return ;
else
return pid - ;
}
public int NextPage(int pid, int pgCount)
{
if (pid == pgCount)
return pgCount;
else
return pid + ;
} }
web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo的更多相关文章
- JSON对象配合jquery.tmpl.min.js插件，手动攒出一个table
jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 通过jquery.transit.min.js插件，实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- 生成二维码（jquery.qrcode.min.js插件）
生成二维码:参看GitHub资源https://github.com/jeromeetienne/jquery-qrcode 直接上代码:(都需要引入jQuery.js 1.引入(jquery.qr ...
- MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- jquery.nicescroll.min.js滚动条插件的用法
1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...
- jquery.fly.min.js 拋物插件
插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp 首先加载jQuery.js和j ...
- jquery.serializejson.min.js的妙用
关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件. 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需 ...
- Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩
最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...
随机推荐
- Eclipse 安装插件
Eclipse 安装插件 本文介绍Eclipse插件的安装方法.Eclipse插件的安装方法大体有三种:直接复制.使用link文件,以及使用eclipse自带的图形界面的插件安装方法. AD: 做为当 ...
- 提示：ArcGIS version not specified. You must call RuntimeManager.Bind before creating any ArcGIS components.错误
ArcGIS10,然后就使用VS创建一个简单的AE应用程序,然后拖放一个toolbar.LicenseControl以及MapControl控件. 接着编译应用程序,编译成功. 然后单击F5运行程序, ...
- ural1521 War Games 2
War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...
- Fourinone 作者博客 -集群复制
http://my.oschina.net/fourinone/blog http://www.iteye.com/blogs/subjects/fourinone http://fourinone. ...
- 三种Dataase Mapping的系统架构
ORM - O/R M - Object/Relational Mapping: A technique/idea used to map objects and thier individual r ...
- Cocos2dx 学习笔记整理----开发环境搭建
最近在学习cocos2dx,预备将学习过程整理成笔记. 需要的工具和环境整理一下: 使用的版本 cocos2dx目前已经出到了v3.1.1,学习和项目的话还是用2.2.3为宜,毕竟不大想做小白鼠,并且 ...
- Xcode崩溃问题调试 signal SIGABRT&EXC_BAD_ACCESS
在进行app开发过程中会遇到很多的问题,各种崩溃令人相当头疼.当然,解决bug的能力也体现了一个程序员的水平,现在来说一说开发中经常遇到的崩溃问题吧. 常见崩溃问题: 一是signal SIGABRT ...
- css3常用样式集锦
控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...
- CodeForces 625D Finals in arithmetic
神奇的构造题,我的思路比较奇葩.搞了好久,看到WA on 91我绝望了,然后自己造数据,找到了错误,总算是AC了,现在是凌晨0:24分,看到AC之后,感动China! 我写的代码无比的长.....应该 ...
- .htaccess 使用大全
重新和重定向 注意:首先需要服务器安装和启用mod_rewrite模块. 强制 www RewriteEngine on RewriteCond %{HTTP_HOST} ^example\.com ...