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标量错误 ...
随机推荐
- 数据结构录 之 单调队列&单调栈。
队列和栈是很常见的应用,大部分算法中都能见到他们的影子. 而单纯的队列和栈经常不能满足需求,所以需要一些很神奇的队列和栈的扩展. 其中最出名的应该是优先队列吧我觉得,然后还有两种比较小众的扩展就是单调 ...
- Django之路： 基本命令与网址进阶
一.Django 基本命令 温馨提示:如果你想学习Django,那么就请您从现在开始按照笔记记录一步一步的用手把代码敲出来,千万不要偷懒哦..... 1.创建一个Django project djan ...
- armstrong's programming erlang 2nd
Re: json handling map functions in erlang 17 I have not read Joes final book on the matter (several ...
- 64位系统访问注册表SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall
public int ChecNonkWoW64() { try { ; string subKey = @"SOFTWARE\Microsoft\Windows\CurrentVersio ...
- stm32-ucos移植lwip-1（raw）
之前在裸机环境下移植了lwip,功能还是很强大的,但是就我看来,这和uip其实差别也不大,其实lwip更强大的功能需要在操作系统之下才能发挥出来,今天就来做这个 首先我们需要移植操作系统,系统选择uc ...
- Android之布局大全
Android布局方式可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类.其它的一些布局都扩展自这5个类. 上结构图: 转自:http://www.cnblogs.com/de ...
- tornado 增加日志模块
log类 #!/usr/bin/env python # -*- coding:utf-8 -*- import logging.handlers class Logger(logging.Logge ...
- linux下源码编译安装mysql
1.安装依赖的包: yum install -y gdb cmake ncurses-devel bison bison-devel 2.创建mysql安装目录和数据文件目录 mkdir -p /us ...
- javap -s 查看java方法签名
工程先用eclipse生成class目录,转到class目录下执行: javap -s com.example.hellojni.MainActivity Compiled from "Ma ...
- WCF应用场景
WCF全称Windows Communication Foundation,是Microsoft为构建面向服务的应用提供的分布式通信编程框架,是.NET Framework 3.5的重要组成部分.使用 ...