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

時間 2019-11-17

標籤 mvc 中用 jpaginate 分頁 easy 兼容家族简体版

原文原文鏈接

看過幾款分頁插件，以爲Jpaginate比較簡約，樣式也比較容易的定製，並且體驗也比較好，支持鼠標滑動效果。先上效果圖：javascript

整個過程很簡單，只須要3步css

1、引入相關樣式和腳本：html

1.MVC4中，用了Bundles，你能夠把同一個類型多個樣式或者腳本的捆綁在一塊兒。調用的時候更加簡潔，便於管理。這樣還能夠減小服務器請求，擁有緩存功能等好處。前端

在App_Start文件夾中的BundleConfig.cs中寫入：java

    //分頁腳本
    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中才是真正的資源地址。jquery

早_Layout.cshtml中引用：web

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

2.在MVC3中，那就直接在_Layout.cshtml中引入便可.ajax

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

2、分頁原理緩存

分頁插件都通常都須要總頁數，顯示頁數。還有當前頁數，每頁顯示數目等，這些必須是根據具體的狀況，後臺去設置。在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);
        }

3、前端分頁實現

<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>