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标量错误 ...
随机推荐
- 第十七篇 --ANDROID DisplayManager 服务解析一
ANDROID从版本4.2开始提供了一个显示管理服务DisplayManagerService,支持多种显示类型的多个显示器的镜像显示,包括内建的显示类型(本地).HDMI显示类型以及支持WIFI D ...
- Raspberry Pi 上使用WN725N连接WIFI
系统版本 lee@Lee-RPi ~ $ uname -ar Linux Lee-RPi + # PREEMPT Thu Dec :: GMT armv6l GNU/Linux 这个版本的系统,已经集 ...
- java中instanceof的用法
java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法:resu ...
- Android开发学习资源
https://developer.android.google.cn/training/index.html
- 关于iOS自定义控件：在view上实现事件和代理
自定义控件.h #import <UIKit/UIKit.h> #import "PPViewtouchesBeginDelegate.h" @interface PP ...
- x86_64是什么意思
x86指的是32位计算机的架构,也指32位的操作系统,比如i386,i686,i486等:x86_64和x64指的都是64位架构,也指64位操作系统
- 关于OC和Swift使用GIT创建项目
1.先进入码云,点击自己的头像 -> ,2.里面有一个SSH公钥,点击 ,3.之后在终端输入 ssh-keygen -t rsa -C “xxxxx@xxx.com”,注意:”” 要用英 ...
- 在阿里云ECS（CentOS6.5）上安装mysql
首先查看服务器上是否已经安装过mysql 命令: rpm -qa | grep mysql 结果: 可以看到ECS上已经有mysql-libs这个包了.这并不影响安装. 查看yum服务器上提供的mys ...
- FZU 2101 大三的美好时光
DP+离散化. 首先需要把时间离散化,剩下的就是简单DP. 还要判断哪些选修课与必修课时间有重合,我用了前缀和来处理. 注意:这题时间端点也不能重合. #include<cstdio> # ...
- 《算法导论》习题2.3-6 改进的InsertSort
InsertSort中有关键的一步是把当前元素A[i]插入到已经排好序的A[1,i-1]的合适的位置上,在原始的InsertSort算法中, 采用的是从后往前一步一步查找的方法,习题2.3-6要求利用 ...