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标量错误 ...
随机推荐
- Mysql 技巧
order by条件: SELECT * FROM tablename WHERE id_one=27 OR id_two=27 ORDER BY CASE WHEN id_one=27 THEN t ...
- idempotence
如果要追根溯源,幂等性是数学中的一个概念,表达的是N次变换与1次变换的结果相同 http://www.cnblogs.com/weidagang2046/archive/2011/06/04/idem ...
- 控制流之if
if语句if语句用来检验一个条件, 如果 条件为真,我们运行一块语句(称为 if-块 ), 否则 我们处理另外一块语句(称为 else-块 ). else 从句是可选的. ~~~~~~~~~~~~~~ ...
- mustache.js基本使用（一）
作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...
- Vue.js起步
Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层.Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. V ...
- PHP 判断几秒前，几分钟，几小时前
PHP 对于时间的过了多久的判断,几秒前,几分钟前,几小时前,$time = strtotime("2017-01-15 14:42:00"); $time = strtotime ...
- Nginx + Apache 反向代理
反向代理负载均衡 使用代理服务器可以将请求转发给内部的Web服务器,使用这种加速模式显然可以提升静态网页的访问速度.因此也可以考虑使用这种技术,让代理服务器将请求均匀转发给多台内部Web服务器之一上, ...
- javascript DOM(2) 一个网页上切换显示不同的图片或文本
摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- Android SQLite 加入自定义函数
SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...
- LPC1768串口使用
Lpc1768内置了四个串口通讯模块,都是异步通讯模块,其中,串口0/2/3是普通串口通讯,串口1与 UART0/2/3 基本相同,只是增加了一个 Modem 接口和 RS-486/EIA-486 模 ...