MVC——分頁控件

不管是什么類型的網站，分頁都是必不可少的功能實現。在這里記錄一下我自己接觸過的分頁控件：

一. MvcPager控件（記得項目里添加MvcPager.dll的引用）

這里面比較常用的就

——@Html.Page()

這里面有很多參數，具體的不一一細說，

，常用的格式是 @Html.Page(數據源，參數設置)，例如：

@Html.Pager(Model, new PagerOptions
 {
     PageIndexParameterName = "pageIndex",
     ShowPageIndexBox = true,
     FirstPageText = "首頁",
     PrevPageText = "上一頁",
     NextPageText = "下一頁",
     LastPageText = "末頁"
　　　……

 })
注意這里的數據源是IPagedList pagedList類型。

同時mvc頁面記得添加一個model及引用：

@model PagedList<User> 

@using Webdiyer.WebControls.Mvc;

 

Controller里面一般就是根據前台分頁控件傳回來的pageIndex來提取相應數據：

public ActionResult Index(int pageIndex=1,int pageSize=10)
        {
            var pagedList = _Services.GetPagedList(pageIndex,pageSize );
          

            return View(pagedList );
        }

對應的services層里獲取數據：

public PagedList<Entity> GetPagedList( int p = 1, int s = 10)
        {
            var query = _db.Table;

            query = query.Where(t => t.State == (int)CommonState.正常);

            query = query.OrderByDescending(t => 1==1);

            return query.ToPagedList(p, s);
        }

完。

 

但是這種分頁是刷新頁面重新提取一下數據填充頁面，對於用戶體驗來說不好。並且，在某些情況下滿足不了需求。

比如說：當你需要根據用戶輸入的內容來作為你提取數據的條件時，上面的分頁方式就不滿足了。

在這里，推薦一個自己常用的js分頁控件：

二、jquery.pagination.js分頁

因為這是用jq去異步去請求數據，所以可以達到“無刷新”的效果，並且可以附帶一些參數條件去請求。

使用時首先引用 jquery.pagination.js （分頁js），跟pagination.css（分頁樣式css）。具體的網上一搜一大把。

前台關鍵js代碼（用的seajs）：

define(function (require, exports, module) {
    var $ = require('$'),
        global = require('global'), loading = require("loading");
    require('tmpl'); require("pagination");
    function App(options) {
        /// <summary>
        /// App 構造函數
        /// </summary>

        //默認配置
        var config = {
            getDataUrl: '',//獲取數據地址
            uiList: '',//前台填充母體
            uiTemp: '',//前台填充模板
            uiMsgTemp: '',//前台填充模板
            uiPagination: ''//前台分頁控件id 或class
        };

        if (options) {
            //合並配置
            config = $.extend(true, config, options);
        }

        this.config = config;

    }

    App.prototype.initData = function (index, size, callback) {
        var self = this;
        loading.show();
        $.ajax({
            type: "POST",
            url: self.config.getDataUrl,
            data: {
                p: index,
                s: size
            },
            success: function (result) {
                $(self.config.uiList).empty();
                if (result.counts == 0) {
                    if (self.config.uiMsgTemp != '')
                        $(self.config.uiMsgTemp).tmpl().appendTo(self.config.uiList);
                }
                else {
                    $(self.config.uiTemp).tmpl(result.data).appendTo(self.config.uiList);
                    callback && callback();
                    self.GetData(index, size, result.counts, callback);
                }

                if ($('#j-pageTite').length > 0)
                    $('#j-pageTite').html(result.counts);

            },
            error: function () {
                loading.msg("系統錯誤");
            }
        });

        loading.hide();
    }

    App.prototype.GetData = function (PageIndex, PageSize, ItemCounts, callback) {
        var self = this;
        //加入分頁的綁定 
        $(self.config.uiPagination).pagination(ItemCounts,
            {
                callback: function (i) {
                    self.initData(i + 1, PageSize, callback);
                },
                prev_text: '上一頁',       //上一頁按鈕里text  
                next_text: '下一頁',       //下一頁按鈕里text  
                is_callback_on_init: false,
                items_per_page: PageSize,  //顯示條數  
                num_display_entries: 10,    //連續分頁主體部分分頁條目數  
                current_page: PageIndex - 1,   //當前頁索引  
                num_edge_entries: 2       //兩側首尾分頁條目數  
            });
    }


    module.exports = App;

});

最后調用

$(function () {
            require.async(['../../api/api'], function (api) {
                var _api = new api({
                    getDataUrl: '/AsynFllower/GetUserCollectItem',
                    uiList: '#j-style-list',
                    uiTemp: '#j-style-tmpl',
                    uiMsgTemp: '#j-msg-tmpl',
                    uiPagination: '.j-pagination'
                });
                _api.initData(1, 10, function () {
                    self.Cancel();
                });
            });
        })

 

完。