MVC自定义分页(附表跳转页Loading提示)

  之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新分页,但是想直接用IQueryable或者IEnumerable传值,并且界面简洁化,可定制性也高点。

  既然还是用IQueryable传值,那么Controller就没什么好说了,就是分页的时候返回一个PartialView而已。现在关键是网页的设计和脚本。先说我想达到的效果吧:

技术分享

  我想达到的效果就是搜索条件和标题占一行,其中标题靠左,搜索条件靠右,添加商品和分页信息占另一行,其中添加商品按钮靠左,分页信息靠右,代码如下:

技术分享

  其中样式row是bootstrap的样式,left_head和right_head是我用来让他们两个分别浮动在左右的:

技术分享

  不过这只是样式问题,都不是重点,重点在局部页面_PageInfo:

<div id="pageInfo">
    <div><input id="btnPrevPage" class="btn btn-default" type="button" value="上一页" /></div>
    <div><input id="btnNextPage" class="btn btn-default" type="button" value="下一页" /></div>
    <div><input id="txtPageIndex" name="pageIndex" type="text" class="form-control" /></div>
    <div><input id="btnJump" class="btn btn-default" type="button" value="跳转" /></div>
    <div id="pageNum"><span id="spanPageIndex"></span><span>/</span><span id="spanTotalPage"></span></div>
</div>

  可以看到分页控件各节点之间是有一定间距的,并且分页数字是靠下的,这些的样式如下:

#txtPageIndex {
    width: 43px;
    display: initial
}
#pageInfo > div {
    float: left;
    margin-right: 2px;
}
#pageNum {
    margin-top: 15px;
}

  样子已经做好了,现在就缺关键的脚本了,点了页面跳转可得跳转页面呀,绑定一下事件:

技术分享

  点了上一页下一页不就跳转一下页面嘛,调用一下Jump函数就可以了:

技术分享

  至于说其中的ShowWarn警告框是什么呢,这个请参阅我的另一篇文章jQuery弹出提示信息简洁版

  需要说明的是我的局部刷新分页是这样写的:

技术分享

  表的局部页面IndexPartial的后面得调用脚本刷新一下页数:

技术分享

  可以看到其中用到了PageContent分页类,这个类在我的另一篇文章通用EF框架里有介绍,这里就不描述了。其中关键的就是调用的刷新页数方法:

function RefreshPage(pageIndex, totalPage) {
    if (totalPage < 2) {
        $(‘#pageInfo‘).hide();
    } else {
        if (pageIndex == 1) {
            $("#btnPrevPage").hide();
            $("#btnNextPage").show();
        } else {
            $("#btnPrevPage").show();
            if (pageIndex == totalPage) {
                $("#btnNextPage").hide();
            } else {
                $("#btnNextPage").show();
            }
        }
        $("#spanPageIndex").text(pageIndex);
        $("#spanTotalPage").text(totalPage);
        $(‘#txtPageIndex‘).val(pageIndex);
        $(‘#pageInfo‘).show();
    }
}

  这里我采用当只有一页时把分页控件隐藏掉,如果当前是第一页就把上一页按钮隐藏,如是是最后一页则把下一页按钮隐藏,这个是个人喜好,大家可以随意修改。。

  至此分页控件就写好了。不过在表页跳转时最好还是提示一下正在加载中吧,要不然可能不知道页面跳转了呢,或者等待太久却不知道还在等待呢。这样的话就需要先放个遮罩层:

<div id="loading">
      <img src="/Content/img/Imgloading.gif" alt="加载中..." />
</div>

  一开始是要隐藏遮罩层的:

#loading {
    background-color: #000;
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    z-index: 9999;
    filter: alpha(Opacity=60);
    -moz-opacity: 0.7;
    opacity: 0.7;
    display: none;
}

    #loading img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px;
    }

  div的#loading就是一个遮罩层,其中的loading图在遮罩层的中央显示:

技术分享

  需要图的直接保存上面那个图吧,这样的话,在form提交post的时候把遮罩层拉出来挡一下,获取到数据后又把他撤走就可以了:

function Loading() {
    $("#loading").fadeIn();
}
function RemoveLoading() {
    $("#loading").hide();
}
$(‘#formQuery‘).on(‘submit‘, Loading);

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。