c# mvc webGrid 無刷新分頁

參考地址：http://www.dotnetcurry.com/ShowArticle.aspx?ID=618

一、webGrid.css
.webGrid
{
    margin: 4px;
    border-collapse: collapse; /*width: 300px;*/
}
.header
{
    background-color: #E8E8E8;
    font-weight: bold;
    color: #FFF;
}
.head
{
    background-color: #E8E8E8;
    font-weight: bold;
    color:Black;
}

.webGrid th, .webGrid td
{
    width: 190px;
    #width:170px;
    border: 1px solid #C0C0C0;
    padding: 5px;
}
.alt
{
    background-color: #E8E8E8;
    color: #000;
}
.person
{
    width: 200px;
    font-weight: bold;
}

二、Pager.js
var sPath = "";
$(function () {
    if ($("#EfficientPaging") != undefined) {
        sPath = $("#EfficientPaging").val();
        $.getJSON(sPath, null, function (d) {
            // add the dynamic WebGrid to the body
            $("#xwGrid").append(d.Data);

            // create the footer
            var footer = createFooter(d.Count);

            $("#DataTable tfoot a").live("click", function (e) {
                e.preventDefault();
                var data = {
                    page: $(this).text()
                };

                $.getJSON(sPath, data, function (html) {
                    // add the data to the table   
                    $("#DataTable").remove();
                    $("body").append(html.Data);

                    // re-add the footer
                    $('#DataTable thead').after(footer);
                });
            });
        });
    }
});

function createFooter(d) {
    var rowsPerPage = 5;
    var footer = "<tfoot><tr><td style='border:none'>";
    for (var i = 1; i < (d + 1); i++) {
        footer = footer + "<a href=#>" + i + "</a>&nbsp;";
    }
    footer = footer + "</td></tr></tfoot>";
    $("#DataTable thead").after(footer);
    return footer;
}  
三、view
 <link href="../../Content/css/webGrid.css" rel="stylesheet" type="text/css" />
 <script src="../../Content/jquery/mvcPager/Pager.js" type="text/javascript"></script>

<input id="EfficientPaging" name="EfficientPaging" type="hidden" value="/Seller/EfficientPaging" />
    <div id="xwGrid">
    </div>
四、Controller
public class SellerController : Controller
{
 private List<Seller> sellPopular;
 [HttpGet]
        public JsonResult EfficientPaging(int? page)
        {
            int icount =10;//每頁顯示數量

            int skip = page.HasValue ? page.Value - 1 : 0;  //如果page爲0默認顯示第一頁
            sellPopular = SellerAccess.GetSellerList(skip, icount);    //獲取當前頁顯示的數據
            var grid = new WebGrid(sellPopular);
            var htmlString = grid.GetHtml(
               tableStyle: "webGrid",
               headerStyle: "head",
               alternatingRowStyle: "alt",
               columns: grid.Columns(
               grid.Column("SellerID", "商家編號", canSort: false),
               grid.Column("SellerNick", "商家暱稱",canSort:false),
                  grid.Column(format: (item) => {
                      return new HtmlString("<input type='button'onclick='RedirectVersion(" + item["SellerID"] + ")' value='管理版本'/>&nbsp;<input type='button' onclick='UpSeller(" + item["SellerID"] + ")' value='修改'/>&nbsp;<input type='button' value='刪除'onclick='DeleteSeller(" + item["SellerID"] + ")'");
                  }, columnName: "操作",canSort:false)
                  ),
                  htmlAttributes: new { id = "DataTable" }
              );
           
            int sellerCount = SellerAccess.GetSellerCount();
            return Json(new
            {
               
                Data = htmlString.ToHtmlString(),
                Count = Math.Ceiling((double)sellerCount/(double)icount)    //計算總頁數s
            }, JsonRequestBehavior.AllowGet);
        }
}
五、DataAccess
 /// <summary>
        /// 查詢所有商家總數

        /// </summary>
        /// <returns></returns>
        public static int GetSellerCount()
        {
            int sellerCount = 0;
            using (ShopexMobileEntities db = new ShopexMobileEntities())
            {
                try
                {
                   sellerCount=db.Seller.ToList().Count();
                }
                catch (Exception)
                {
                    db.Dispose();
                    return sellerCount;
                }
            }
            return sellerCount;
        }
        /// <summary>
        /// 獲取當前頁顯示的數據
        /// </summary>
        /// <param name="pageIndex">當前頁</param>
        /// <param name="count">每頁顯示的數量</param>
        /// <returns></returns>
        public static List<Seller> GetSellerList(int pageIndex, int count)
        {
            List<Seller> sellerList = new List<Seller>();
            using (ShopexMobileEntities db = new ShopexMobileEntities())
            {
                try
                {
                     sellerList=db.Seller.OrderBy(o => o.SellerID).Skip(pageIndex * count).Take(count).ToList();
                  
                }
                catch (Exception)
                {
                    db.Dispose();
                    return null;
                }
            }
            return sellerList;
        }