web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景：webform或者mvc下实现插件快速分页
ps：我这里用的mvc开发的，数据库连接。用的ADO.NET实体数据模型
此案例下载地址（内含需要用到的一个插件与数据库）：http://download.csdn.net/detail/u011597071/9384578
效果图：
1.需要加载的框架
1 @*加载jquery框架*@ 2 <script src="~/Scripts/jquery-1.8.2.min.js"></script> 3 @*加载Tmpl分页控件*@ 4 <script src="~/Scripts/jquery.tmpl.min.js"></script>
4.需要添加的类：
1 public class Pager 2 { 3 //上页 4 public string Pre { get; set; } 5 //下一页 6 public string Next { get; set; } 7 //首页 8 public string First { get; set; } 9 //末页 10 public string Last { get; set; } 11 //当前为第几页数据 12 public string Current { get; set; } 13 //总共页面 14 public string Count { get; set; } 15 }
3.前台代码
1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>Index</title> 5 @*加载jquery框架*@ 6 <script src="~/Scripts/jquery-1.8.2.min.js"></script> 7 @*加载Tmpl分页控件*@ 8 <script src="~/Scripts/jquery.tmpl.min.js"></script> 9 @*自定义分页模板*@ 10 <script type="text/x-jquery-tmpl" id="pager"> 11 <div> 12 <a href="javascript:Load(${First})">首页 </a> 13 <a href="javascript:Load(${Pre})">上一页</a> 14 <a href="javascript:Load(${Next})">下一页</a> 15 <a href="javascript:Load(${Last})">末页</a> 16 总共${Count}页/当前第${Current}页 17 </div> 18 </script> 19 <script> 20 $(function () { 21 //jquery框架载入后执行Load方法，并传入需要查询的页面1 22 Load(1); 23 }); 24 function Load(pIndex) { 25 //执行一个ajax请求 26 $.ajax({ 27 //请求的路径，并且传入需要查询的页面 28 url: "/Home/List/" + pIndex, 29 //返回的数据类型 30 dataType: "json", 31 //请求正常执行后调用的方法 32 success: function (result) { 33 //清空指定表格里面的数据 34 $("#tab").empty(); 35 //这里返回的对象为json。所以需要遍历返回的键为rows的对象 36 //便利方法中i为索引，mod为值 37 $.each(result.rows, function (i, mod) { 38 //创建一行 39 var tr = "<tr><td>" + mod.Title + "</td></tr>"; 40 //追加到tab里面 41 $("#tab").append(tr); 42 }); 43 //清空id为paged的div里面的内容 44 $("#paged").empty(); 45 //把id为pager的js模板调用tmpl方法并传入返回的json中的pager对象。追加到id为paged的div标签中 46 $("#pager").tmpl(result.pager).appendTo("#paged"); 47 } 48 }); 49 } 50 </script> 51 <style> 52 table { 53 border-collapse:collapse; 54 border:1px solid #0094ff; 55 } 56 tr { 57 border-collapse:collapse; 58 border:1px solid #0094ff; 59 } 60 </style> 61 </head> 62 <body> 63 <div> 64 <table id="tab"></table> 65 <div id="paged"></div> 66 </div> 67 </body> 68 </html>
4.后台代码
1 public class HomeController : Controller 2 { 3 BookShopPlusEntities db = new BookShopPlusEntities(); 4 public ActionResult Index() 5 { 6 return View(); 7 } 8 public ActionResult List(int id) 9 { 10 //指定每页多少条数据 11 int pageSize = 10; 12 //获取books表下全部的数据 13 List<Books> list = db.Books.ToList(); 14 //跳过数据中指定的条数(每页数乘当前页)，然后截取指定条数(每页多少条)的数据 15 List<Books> data = list.Skip((id - 1) * pageSize).Take(pageSize).ToList(); 16 //创建一个匿名类，防止死循环 17 var result = from b in data 18 select new 19 { 20 Title = b.Title, 21 Id = b.Id 22 }; 23 //获取总共的页码(这里用的是三目法) 24 int pgCount = list.Count() % pageSize == 0 ?list.Count() / pageSize : list.Count() / pageSize + 1; 25 //创建一个Pager对象，并且调用SetPager方法为Pager对象赋值（传入当前页和总页数） 26 Pager pagerData = SetPager(id, pgCount); 27 //返回json 28 return Json(new { rows = result, pager = pagerData }, JsonRequestBehavior.AllowGet); 29 } 30 public Pager SetPager(int pid, int pgCount) 31 { 32 //创建对象 33 Pager pager = new Pager(); 34 //为对象赋值 35 pager.Current = pid + ""; 36 //调用PrePage，目的是防止当前页为1，但是用户还点上一页 37 pager.Pre = PrePage(pid) + ""; 38 //调用NextPage，目的是防止当前页为最后一页，但是用户还点下一页导致的错误 39 pager.Next = NextPage(pid, pgCount) + ""; 40 pager.First = "1"; 41 pager.Last = pgCount + ""; 42 pager.Count = pgCount + ""; 43 //最后返回对象 44 return pager; 45 } 46 public int PrePage(int pid) 47 { 48 if (pid == 1) 49 return 1; 50 else 51 return pid - 1; 52 } 53 public int NextPage(int pid, int pgCount) 54 { 55 if (pid == pgCount) 56 return pgCount; 57 else 58 return pid + 1; 59 } 60 61 }
