码迷,mamicode.com
首页 > Web开发 > 详细

MVC 分页插件+ajax分页

时间:2015-07-09 21:16:30      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

分页样式插件http://www.jq22.com/plugin/2705

前台引用:

1 <script src="~/kkpager/lib/jquery-1.8.2.min.js"></script>
2 <script src="~/kkpager/src/kkpager.js"></script>
3 <link href="~/kkpager/src/kkpager_blue.css" rel="stylesheet" />

模糊搜索框:

1 <form action="@Url.Action("Select")" method="get">
2     <input id="a" name="a" type="search" />
3     <input type="submit" value="search" />
4 </form>

数据:

<ul id="Page">
     @Html.Raw(ViewData["list"].ToString())
</ul>

js代码:

技术分享
 1 <script type="text/javascript">
 2     function getParameter(name) {
 3         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 4         var r = window.location.search.substr(1).match(reg);
 5         if (r != null) return unescape(r[2]); return null;
 6     }
 7 
 8     //init
 9     $(function () {
10         var totalPage = @ViewData["pageCount"];
11         var totalRecords = @ViewData["totalCount"];
12         var pageNo = getParameter(‘pno‘);
13         if (!pageNo) {
14             pageNo = 1;
15         }
16         //生成分页;
17         //有些参数是可选的,比如lang,若不传有默认值
18         kkpager.generPageHtml({
19             pno: pageNo,
20             //总页码
21             total: totalPage,
22             //总数据条数
23             totalRecords: totalRecords,
24             mode: ‘click‘,//默认值是link,可选link或者click
25             click: function (n) {
26                 // do something
27                 //手动选中按钮
28                 this.selectPage(n);
29                 $.ajax({
30                     type: ‘POST‘,
31                     url: ‘@Url.Action("Select")‘,
32                     data:{page:n},
33                     success: function(e){
34                         $("#Page").html(‘‘).append(e);
35                     }
36                 });
37                 return false;
38             }
39             /*
40             ,lang                : {
41                 firstPageText            : ‘首页‘,
42                 firstPageTipText        : ‘首页‘,
43                 lastPageText            : ‘尾页‘,
44                 lastPageTipText            : ‘尾页‘,
45                 prePageText                : ‘上一页‘,
46                 prePageTipText            : ‘上一页‘,
47                 nextPageText            : ‘下一页‘,
48                 nextPageTipText            : ‘下一页‘,
49                 totalPageBeforeText        : ‘共‘,
50                 totalPageAfterText        : ‘页‘,
51                 currPageBeforeText        : ‘当前第‘,
52                 currPageAfterText        : ‘页‘,
53                 totalInfoSplitStr        : ‘/‘,
54                 totalRecordsBeforeText    : ‘共‘,
55                 totalRecordsAfterText    : ‘条数据‘,
56                 gopageBeforeText        : ‘&nbsp;转到‘,
57                 gopageButtonOkText        : ‘确定‘,
58                 gopageAfterText            : ‘页‘,
59                 buttonTipBeforeText        : ‘第‘,
60                 buttonTipAfterText        : ‘页‘
61             }*/
62         });
63     });
64 </script>
View Code

控制器:

技术分享
 1 Models.VideoEntities3 db = new Models.VideoEntities3();
 2         public ActionResult Select(string a, int page = 1)
 3         {
 4             int totalCount = 0;//数据总数
 5             int pageCount = 0;//页数
 6             const int PageSize = 8;//页面size
 7             List<Video.Models.Video> list;
 8 
 9 
10             list = GetVideo(page, PageSize, ref totalCount,a).ToList();
11 
12             pageCount = totalCount % PageSize == 0 ? totalCount / PageSize : totalCount / PageSize + 1;
13             //把页数和数据总数发送到前台
14             ViewData["totalCount"] = totalCount;
15             ViewData["pageCount"] = pageCount;
16             System.Text.StringBuilder sb = new System.Text.StringBuilder();
17             foreach (Video.Models.Video item in list)
18             {
19                 sb.Append("<li>");
20                 sb.Append("<a href=‘/Video/Details/"+item.VideoId+"‘>");
21                 sb.Append("<div class=‘bgImage‘ style=‘background-image: url(‘ImagePath/"+item.Image+")‘);‘>");
22                 sb.Append("<span></span>");
23                 sb.Append("<div class=‘detail‘>"+item.VideoDetail+"</div>");
24                 sb.Append("<div class=‘textImage‘>");
25                 sb.Append("<h2>"+item.VideoName+"</h2>");
26                 sb.Append("</div>");
27                 sb.Append("</div>");
28                 sb.Append("</a>");
29                 sb.Append("</li>");
30             }
31             ViewData["list"] = sb;
32             //判断是不是ajax请求
33             if (Request.IsAjaxRequest())
34             {
35                 return Content(sb.ToString());
36             }
37             return View();
38         }
View Code

获取分页类:

技术分享
 1 #region 获取分页数据和列数
 2         public List<Video.Models.Video> GetVideo(int pageIndex, int pageSize, ref int totalCount,string a)
 3         {
 4             List<Video.Models.Video> list = null;
 5             if (string.IsNullOrEmpty(a))
 6             {
 7                 list = (from p in db.Videos
 8                         orderby p.VideoId descending
 9                         select p).Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
10             }
11             else {//模糊搜索
12                 list = (from p in db.Videos where p.VideoName.Contains(a)
13                         orderby p.VideoId descending
14                         select p).Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
15             }
16             
17             totalCount = db.Videos.Count();
18             //Linq表达式搜索的数据数量是全部数据的总数,当模糊搜索出的数据少于全部数据总数的时候就要处理下数据总数
19             if (list.Count<pageSize)
20             {
21                 totalCount = list.Count;
22             }
23             return list;
24         }
25         #endregion
View Code

 

MVC 分页插件+ajax分页

标签:

原文地址:http://www.cnblogs.com/fujinzhao/p/4634182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!