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