本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用ViewBag來返回總記錄數和pageSize。ajax通過回撥函式把控制器返回的分部檢視內容載入到主檢視中顯示。

說明：分頁具體的分頁導航和樣式使用了kkpager外掛。

1、主檢視（用於顯示資料）程式碼

<link href="~/Content/kkpager_blue.css" rel="stylesheet" />
<script src="~/Content/kkpager.js"></script>

<table id="result" class="posts block"></table> 
<nav id="kkpager" class="posts block pagination"></nav>
<script type="text/javascript">  
    $(function ()  
    {  
        GetArticlesData(1);  
    });  
    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
  
    function GetArticlesData(pageIndex)  
    {  
        var ajaxUrl = '/TestDataDB/AjaxPaging?pageIndex=' + pageIndex;
        var ajaxType = 'post';  
        var ajaxDataType = 'text';  
        var sucFun = function (data, status)  
        {
            if (data == null && status != "success")  
            {  
                alert("獲取資料失敗！");  
                return false;  
            }  
            else  
            {  
                $("#result").html(data);
                //定義分頁樣式  
                var totalCount = parseInt('@ViewBag.TotalCount');
                var pageSize = parseInt('@ViewBag.PageSize');  
                var pageNo = getParameter('pno');//該引數為外掛自帶，不設定好，呼叫資料的時候當前頁碼會一直顯示在第一頁
                if (!pageNo) {
                    pageNo = 1;
                }
                var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);  
                kkpager.generPageHtml({
                    pno: pageNo,
                    total: totalPages,
                    totalRecords: totalCount,
                    mode: 'click',
                    click: function (n) {
                        this.selectPage(n);//外掛自帶的方法，手動呼叫某一頁碼
                        searchPage(n);
                        return false;
                    }
                });
            }  
        };    
        //ajax引數設定  
        var Option =  
                    {  
                        url: ajaxUrl,  
                        type: ajaxType,  
                        dataType: ajaxDataType,  
                        cache: false, //設定為 false 將不會從瀏覽器快取中載入請求資訊。  
                        async: true, //(預設: true)，所有請求均為非同步請求。傳送同步請求，請將此選項設定為 false。同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。  
                        timeout: 3600, //設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。  
                        error: function () { },  
                        success: sucFun,  
                        beforeSend: function () { }  
                    };  
        $.ajax(Option);  
        return false;  
    }    
    //ajax翻頁  
    function searchPage(n)  
    {  
        GetArticlesData(n);  
    }  
</script>  
 

@model IEnumerable<Test13.Models.TestDataDB>
@{
    ViewBag.Title = "AjaxFenbuView";
}
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Uid) 
      </th>
        <th>
            @Html.DisplayNameFor(model => model.Uname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Upwd)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Udata)
        </th>
        <th></th>
    </tr>
@foreach (Test13.Models.TestDataDB item in Model)
{
        <tr>
            <td>@item.Uid</td>
            <td>@item.Uname</td>
            <td>@item.Upwd</td>
            <td>@item.Udata</td>
            <td>
                @Html.ActionLink("編輯", "Edit", new { id=item.ID }) |
                @Html.ActionLink("檢視詳細", "Details", new { id=item.ID }) |
                @Html.ActionLink("刪除", "Delete", new { id=item.ID })
            </td>
        </tr>
}
 

 private readonly int pageSize =1;
        public ActionResult AjaxFenYe()
        {
            ViewBag.PageSize = pageSize;
            ViewBag.TotalCount = db.TestDataDBS.Count();
            return View();
        }
        public ActionResult AjaxPaging(int pageIndex = 1)
        {
            var persons = (from p in db.TestDataDBS orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);
            return PartialView("AjaxFenbuView", persons.ToList());
        }