MVC實現分頁功能

分頁功能是我們在做查詢時不可缺少的部分，做好分頁不僅僅方便查看，也要許多的便利。
MVC的分頁的實現需要有ViewBag來儲存值
有較強的邏輯性
例子:
顯示頁面：
@{
ViewBag.Title = “Index”;
}

全圓園 666

名稱：

@foreach (var item in Model) { }

編號	名稱	備註
@item.ID	@item.Name	@item.Remark

• 共 @ViewBag.totalPages 頁，第 頁，每頁顯示

          <select id="pageSize" onchange="page(1);">
              @{
                  var listPageSize = new List<int> { 5, 10, 20, 50, 100 };
              }
              @foreach (var item in listPageSize)
              {
                  if (@ViewBag.pageSize == @item)
                  {
                      <option value="@item" selected="selected">@item</option>
                  }
                  else
                  {
                      <option value="@item">@item</option>
                  }
              }
          </select>
          條
      </li>
  </ul>
  <ul class="pagination">
      <li class="page-item ">
          <a class="page-link" href="javascript:page(1);" tabindex="-1" aria-disabled="true">首頁</a>
      </li>
      @if (@ViewBag.pageIndex > 1)
      {
          <li class="page-item"><a class="page-link" href="javascript:page(@ViewBag.pageIndex-1);">上頁</a></li>
      }
      else
      {
          <li class="page-item disabled"><a class="page-link" href="javascript:page(@ViewBag.pageIndex-1);">上頁</a></li>
      }
  
  
      <li class="page-item " aria-current="page">
          <span class="page-link"> @ViewBag.pageIndex</span>
      </li>
  
      @if (@ViewBag.pageIndex < @ViewBag.totalPages)
      {
          <li class="page-item " aria-current="page">
              <a class="page-link" href="javascript:page(@ViewBag.pageIndex+1);">下頁 </a>
          </li>
      }
      else
      {
          <li class="page-item disabled" aria-current="page">
              <a class="page-link" href="javascript:page(@ViewBag.pageIndex+1);">下頁 </a>
          </li>
      }
  
      <li class="page-item">
          <a class="page-link" href="javascript:page(@ViewBag.totalPages);">末頁</a>
      </li>
      <li class="page-item">
          <input type="button" class="page-link" value="GO" onclick="go()" />
      </li>
  </ul>
  

@section scripts{

<script>
    function page(pageIndex) {
        var name = $("#txtCondName").val(); //獲取搜索框的值
        var pageSize = $("#pageSize").val(); //獲取下拉框的值

        window.location.href = "/role/index?pageindex=" + pageIndex
            + "&pageSize=" + pageSize + "&name=" + name;

    }

    function go() {
        //獲取輸入的頁碼的值
        var pageIndex = $("#pageIndex").val();
        page(pageIndex);

    }


</script>

}
控制器頁面代碼：
public ActionResult Index(int pageIndex=1,int pageSize=10,string name="")
        {
            //獲取總記錄數
            var totalRows = db.Roles.Count();
            //計算總頁數
            var totalPages = Math.Ceiling(totalRows * 1.00 / pageSize);
            ViewBag.totalPages = totalPages;

var roles = db.Roles.Where(p=>p.Name.Contains(name))
                .OrderBy(p=>p.ID)  //排序
                .Skip((pageIndex-1) * pageSize)    //跳過
                .Take(pageSize)   //取
                .ToList();
            ViewBag.pageIndex = pageIndex;
            ViewBag.name = name;
            ViewBag.pageSize = pageSize;
            return View(roles);
        }