爱站程序员基地asp.net动态分页功能
1.0效果图点击上一页，下一页，首页，末页，进行相应的也页面跳转。选择第几页点击go进行相应页面跳转。
2.0控制器代码
public ActionResult Index(int pageIndex = 1, int pageSize = 10, string name = \"\"){//获取总记录数var totalRows = dt.Roles.Count();//计算总页数var totalPages = Math.Ceiling(totalRows * 1.00 / pageSize);ViewBag.totalPages = totalPages;var roles = dt.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);}
3.0视图代码
@{ViewBag.Title = \"Index\";}<h2>全圆园 666</h2><div class=\"input-group\"><label>名称：</label><input type=\"text\" class=\"form-control\" id=\"txtCondName\" value=\"@ViewBag.name\" /><input type=\"button\" id=\"btnSearch\" value=\"搜索\" onclick=\"page(1);\" /></div><table class=\"table table-bordered\"><thead><tr><th>编号</th><th>名称</th><th>备注</th></tr></thead><tbody>@foreach (var item in Model){<tr><th>@item.ID</th><th>@item.Name</th><th>@item.Remark</th></tr>}</tbody></table><nav aria-label=\"...\"><ul class=\"pagination\"><li class=\"page-item \">共 @ViewBag.totalPages 页，第<input type=\"number\" min=\"1\" max=\"@ViewBag.totalPages\" id=\"pageIndex\" value=\"@ViewBag.pageIndex\" />页，每页显示<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></nav>@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>}
一.技术难点
如何在页面获取当前页码PageIndex以及每页多少PageSize，输tname入搜索名字。使用viewbag进行控制器到视图传值和视图保存值
例如输入系统后防止系统显示在页面上，知道下次页面刷新。
二.核心代码
1.10使用javascripts方法在url地址栏通过window.href传值
@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;}</script>}
οnclick=\”page(1)\”这个方法
括号你的1是指默认未第一页
