MVC中用Jpaginate分页

MVC中用Jpaginate分页 So easy!（兼容ie家族）

 

看过几款分页插件，觉得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/

如果对你有帮助，就请支持一下~   :）

 

 

分类: C#/.Net, Jquery, MVC

标签: 分页