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标量错误 ...
随机推荐
- Pythagorean Triples
Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...
- hive第二篇----hive中partition如何使用
一.背景 1.在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据,因此建表时引入了partition概念. 2.分区表指的是在创建表 ...
- ASP.net 自定义控件GridView
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls ...
- mysql优化------2 查看系统性能（表大小，I/o性能）
三:判断mysql I/0 性能的一种方式(网络搜集供参考) show global status like 'innodb_dblwr%'\G 如果innodb_dblwr_pages_writ ...
- webstorm安装express报错
.... Exit code: -1 解决方法: webstorm创建express 需要 预先安装express-generator npm install express-generator -g
- C++中string类的使用方法
如果所比较的两个string 相等,则返回0: 操作string 大于参数string,返回 正数:操作string 小于参数string,返回负数. (1) 比较操作string 与 _Str 或C ...
- 【转】国外程序员整理的 C++ 资源大全
内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...
- libusb开发者指南（转）
源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...
- 设置MyEclipse黑色主题背景
设置MyEclipse黑色主题背景 1. 下载 http://eclipsecolorthemes.org/ 看哪个合适直接点击进入, 下载右边的epf 2. 下载完成...打开myeclipse. ...
- java中常用的空判断
Java 判断字符串是否为空的四种方法: 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: 比较字 ...