代码改变世界

MVC中用Jpaginate分页 So easy!(兼容ie家族)

2013-12-09 09:19  stoneniqiu  阅读(...)  评论(... 编辑 收藏

     看过几款分页插件,觉得Jpaginate比较简约,样式也比较容易的定制,而且体验也比较好,支持鼠标滑动效果。先上效果图:

     

     整个过程很简单,只需要3步

一、引入相关样式和脚本:

   1.MVC4中,用了Bundles,你可以把同一个类型多个样式或者脚本的捆绑在一起。调用的时候更加简洁,便于管理。这样还可以减少服务器请求,拥有缓存功能等好处。

     在App_Start文件夹中的BundleConfig.cs中写入:

    //分页脚本
    bundles.Add(new ScriptBundle("~/bundles/jPaginate").Include("~/Content/jPaginate/jquery.paginate.js"));
    //分页样式            
    bundles.Add(new StyleBundle("~/bundles/jPaginateCss").Include("~/Content/jPaginate/css/style.css")); 

  黄色mark的部分是自己取得名字。include中才是真正的资源地址。

  早_Layout.cshtml中引用:

  @Styles.Render("~/bundles/jPaginateCss")
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/jPaginate")

 2.在MVC3中,那就直接在_Layout.cshtml中引入即可.

 <link href="../../Content/jPaginate/css/style.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jPaginate/jquery.paginate.js" type="text/javascript"></script>

二、分页原理

 分页插件都一般都需要总页数显示页数。还有当前页数每页显示数目等,这些必须是根据具体的情况,后台去设置。在MVC中,我们设置好一个ViewModel,以Json返回去就行了。显示的页面用partView,这样配合ajax 实现异步翻页。

 

        /// <summary>
        /// 每页显示的条数
        /// </summary>
        private const int DefaultTopicPageCount = 20;

        /// <summary>
        /// 显示出来的页数
        /// </summary>
        private const int DefaultDisplayCount = 8;

        /// <summary>
        /// 首页话题列表
        /// </summary>
        /// <returns></returns>
        public ActionResult TopicList(int? pageIndex=1)
        {
            if (pageIndex == 0 || pageIndex == null)
                pageIndex = 1;

            var tops = LoveDb.TopicAll().Where(n => n.IsValid).OrderByDescending(n => n.UpDataTime);

            var totalcount = tops.Count();// 所有topic的数目
            var startIndex = (pageIndex - 1) * DefaultTopicPageCount; //每页起始话题数
            var endIndex = (pageIndex) * DefaultTopicPageCount - 1;//每页结束话题数
            if (endIndex >= totalcount) endIndex = totalcount;

            var seletops = tops.Where((t, i) => i >= startIndex && i <= endIndex).ToList();//选出在起始数和结束数之间的topic 也就是当前页要显示的topic
        
            foreach (var topic in seletops.Where(topic => topic.Title.Length>18))
            {
                topic.Title = topic.Title.Substring(0, 15) + "...";
            }
            return PartialView(seletops);
        }

        /// <summary>
        /// 分页 抛给前台的数据
        /// </summary>
        /// <returns></returns>
        public JsonResult TopicPager()
        {
            //需要计算出总的页数
          var count=  LoveDb.TopicAll().Count(n => n.IsValid);
          var page = (int) Math.Ceiling((double)count / DefaultTopicPageCount);
            var pager = new Pager
                {
                    DisplayCount = page > DefaultDisplayCount ? DefaultDisplayCount : page,//显示页数调整 
                    PageCount = page,
                    ItemCount = DefaultTopicPageCount,//这个可以忽略
                    StarPage = 1
                };
            return Json(pager);
        }

 

三、前端分页实现

<script type="text/javascript">
    $(function () {
        $.post("/Interactive/TopicPager", function (data) {
            $("#pager").paginate({
                count: data.PageCount,//总页数
                start: data.StarPage,//起始页
                display: data.DisplayCount,// 显示的页数
                border: true,
                border_color: '#fff',//自己调整样式。
                text_color: 'black',
                background_color: 'none',
                border_hover_color: '#ccc',
                text_hover_color: '#000',
                background_hover_color: '#fff',
                images: false,
                mouse: 'press',
                onChange: function (page) {//翻页
                    $.post("/Interactive/TopicList", { pageIndex: page }, function (content) {
                        $("#topiclist").html(content);
                    });
                }
            });
        });
})
</script>  

  这样就就ok了。

  其他样式:

  

    下载地址: http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

    如果对你有帮助,就请支持一下~   :)