基于bootstrap的局部刷新的分页

在之前的工作中我用的分页有很多,一直不牢固,所以自己用起来也不是很顺手,这是一个局部刷新的分页,我试了很多,本想用mvcPager来做局部刷新,但是考虑到成本太高,放弃了,先来总结一下基于bootstrap的分页吧,便于自己以后使用

开源地址 https://github.com/lyonlai/bootstrap-paginator

首先引用

Jquery

bootstrap.min.js

bootstrap-paginator.min.js

控制器代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[AuthorizationCodeAttribute]
       [Description("评论信息")]
       [HttpPost]
       public ActionResult Comment(int id, int? page)
       {
           #region 评论列表        
           var dal = new CarCommentOperator();
           int pageIndex = page ?? 1;//当前页
           if (!string.IsNullOrEmpty(Request.QueryString["pageindex"]))
           {
               if (!int.TryParse(Request.QueryString["pageindex"], out pageIndex))
               {
                   pageIndex = 1;
               }
           }
           const int pageSize = 2;
           long totalCount;
           long totalPageCount;        
           IEnumerable<CarComment> list = dal.GetList(pageIndex, pageSize, out totalPageCount, out totalCount, "CarId=" + id);
           var commentIPagedList = new StaticPagedList<CarComment>(list, pageIndex, pageSize, Convert.ToInt32(totalCount));
           #endregion
           //转成Json格式
           var strResult = "{\"pageCount\":" + commentIPagedList.PageCount + ",\"CurrentPage\":" + commentIPagedList.PageNumber + ",\"list\":" + JsonConvert.SerializeObject(list) + "}";  
           return Json(strResult, JsonRequestBehavior.AllowGet);
 
       }

  js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script type="text/javascript">
           $(document).ready(function() {             
               var carId = 1;
               $.ajax({
                   url: "/car/Comment",
                   datatype:'json',
                   type: "Post",
                   data: "id=" + carId,
                   success: function(data) {                   
                       if (data!=null) {                         
                           $.each(eval("(" + data + ")").list, function(index, item) { //遍历返回的json                              
                               $("#list").append('<table>');
                               $("#list").append('<tr>');
                               $("#list").append('<td>评论者</td>');
                               $("#list").append('<td>'+item.UserProfileId+'</td>');
                               $("#list").append('</tr>');
                               $("#list").append('<tr>');
                               $("#list").append('<td>内容</td>');
                               $("#list").append('<td>'+item.Content+'</td>');
                               $("#list").append('</tr>');
                               $("#list").append('</table>');                               
                           }); //添加select option
                           $("#commentList").append('<div id="pager"><ul id="page"></ul></div>');
                           var element = $("#page");                      
                           var pageCount = eval("(" + data + ")").pageCount; //取返回的Json数据中的pageCount(把返回数据转成object类型)
                           var currentPage = eval("(" + data + ")").CurrentPage; //去返回的Json数据中的CurrentPage
                           var options = {                   
                               bootstrapMajorVersion: 3, //版本
                               currentPage: currentPage, //当前页数
                               numberOfPages: 5, //设置显示的页码数
                               totalPages:pageCount, //总页数
                               itemTexts: function(type, page, current) {
                                   switch (type) {
                                       case "first":
                                           return "首页";
                                       case "prev":
                                           return "上一页";
                                       case "next":
                                           return "下一页";
                                       case "last":
                                           return "末页";
                                       case "page":
                                           return page;
                                   }
                                   //}
                                   //pageUrl: function(type, page, current) {
                                   //    return "/car/Details?page=" + page;
                               },//点击事件
                               onPageClicked: function(event, originalEvent, type, page) {                    
                                   $.ajax({
                                       url: "/car/Comment?id="+carId,
                                       type: "Post",
                                       data:"page="+ page,
                                       success: function(data1) {
                                           if (data1!=null) {
                                               $("#list").html("");
                                               $.each(eval("(" + data1 + ")").list, function (index, item) { //遍历返回的json                              
                                                   $("#list").append('<table style="border: 1px solid #00ced1;width: 300px">');
                                                   $("#list").append('<tr>');
                                                   $("#list").append('<td>评论者</td>');
                                                   $("#list").append('<td>'+item.UserProfileId+'</td>');
                                                   $("#list").append('</tr>');
                                                   $("#list").append('<tr>');
                                                   $("#list").append('<td>内容</td>');
                                                   $("#list").append('<td>'+item.Content+'</td>');
                                                   $("#list").append('</tr>');
                                                   $("#list").append('</table>');                              
                                               });   
                                           }
                                       }
                                   });
                               }
                           };
                           element.bootstrapPaginator(options);
                       }
                   }
               });
           });

  

posted on   利利乐园  阅读(8669)  评论(0编辑  收藏  举报
努力加载评论中...

点击右上角即可分享
微信分享提示