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();
                });
            });
        })

 

完。