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/

    如果對你有幫助，就請支持一下~   :）