web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

背景：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     }

View Code

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>&nbsp;&nbsp;
13             <a href="javascript:Load(${Pre})">上一页</a>&nbsp;&nbsp;
14             <a href="javascript:Load(${Next})">下一页</a>&nbsp;&nbsp;
15             <a href="javascript:Load(${Last})">末页</a>&nbsp;&nbsp;
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>

View Code

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     }