Asp.net MVC3表格共用分页功能

在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页。

第一:没有有数据提交的分页功能:

第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下:

public ActionResult PageIndex(string action, string controller, int currentPage, int pageCount)

{

//int count = db.Product.Count();

ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面

ViewBag.CurrentPage = currentPage;//从操作中获取当前页数将传入分页视图页面

ViewBag.action = action;

ViewBag.controller = controller;

return PartialView();

}

传入四个参数,分别为:操作,控制器,当前页数,数据总页数,操作是指你要分页的试图的操作一般为Index,控制器为该试图对应的控制器, 这四个都为视图传递数据的。

第二步:在PageIndex控制器下的Index上添加视图选择分布视图,代码如下:

@if (ViewBag.PageCount == null || ViewBag.PageCount == 0)

{

<span>您好,当前没有数据显示!</span>

}

else

{

if (ViewBag.CurrentPage <= 10)

{

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">

首页</a>|</span>

}

else

{

<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = 1 }, null)">

首页</a>

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 10 }, null)">

...</a> </span>

}

for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)

{

if (i <= 0)

{

continue;

}

if (i > ViewBag.PageCount)

{

break;

}

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = i }, null)">

第 @i 页</a>|</span>

}

if (ViewBag.CurrentPage >1)

{

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage - 1 }, null)">

上一页</a>|</span>

}

if (ViewBag.PageCount>ViewBag.CurrentPage )

{

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 1 }, null)">

下一页</a></span>

}

if (ViewBag.CurrentPage == ViewBag.PageCount || ViewBag.CurrentPage >= ViewBag.PageCount - 10)

{

<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">

尾 页</a>

}

else

{

<span><a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.CurrentPage + 10 }, null)">

...</a></span>

<a href="@Url.Action(ViewBag.action, ViewBag.controller, new { PageIndex = ViewBag.PageCount }, null)">

尾 页</a>

}

<span style="padding-left: 20px">当前页数: @ViewBag.CurrentPage | 共 @ViewBag.PageCount 页

</span>

}  在操纵中(Index)的部分代码:  public ViewResult Index(int? pageIndex) { int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;  ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0); return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20)); } 这个意思是以二十也一页作为当前页. 在你要分页的页面的下面加入调用: @Html.Action("PageIndex", "Product", new { action = "Index", controller = "Log", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })

按照如上操作就大功告成了!

第二: 有数据提交的分页功能的实现:

第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下:

public ActionResult PageIndexKey(int currentPage, int pageCount)

{

ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面

ViewBag.CurrentPage = currentPage;//从操作中获取当前页数将传入分页视图页面

return PartialView();

}            第二步:在要分页的页面Index上添加视图选择分布视图,代码如下 <script>

$(function () {

$("#pageingByForm a").click(function (event) {

$("#pageIndex").val($(this).attr("pageIndex"));

//$(this).parent("Form").submit();

document.getElementsByTagName("Form").item(0).submit();

event.preventDefault();

});

});

</script>

@Html.Hidden("pageIndex")

<div id="pageingByForm">

@if (ViewBag.PageCount == null || ViewBag.PageCount == 0)

{

<span>当前没有数据</span>

}

else

{

if (ViewBag.CurrentPage <= 10)

{

<span><a pageindex="1" href="#">首页</a>|</span>

}

else

{

<span><a pageindex="1" href="#">首页</a>|</span>

<span><a pageIndex="@(ViewBag.CurrentPage - 10)" href="#">...</a>|</span>

}

for (int i = ViewBag.CurrentPage - 3; i < ViewBag.CurrentPage + 3; i++)

{

if (i <= 0)

{

continue;

}

if (i > ViewBag.PageCount)

{

break;

}

<span><a pageIndex="@i" href="#">第 @i 页</a>|</span>

}

if (ViewBag.CurrentPage >1)

{

<span><a pageIndex="@(ViewBag.CurrentPage - 1)" href="#">上一页</a>|</span>

}

if (ViewBag.PageCount > ViewBag.CurrentPage)

{

<span><a pageIndex="@(ViewBag.CurrentPage + 1)" href="#">下一页</a></span>

}

if (ViewBag.CurrentPage >= ViewBag.PageCount - 10)

{

}

else

{

<span><a pageIndex="@(ViewBag.CurrentPage + 10)" href="#">...</a>|</span>

<span><a pageIndex="@ViewBag.PageCount" href="#">尾 页</a></span>

}

<span style="padding-left: 20px">当前页数: @ViewBag.CurrentPage | 共 @ViewBag.PageCount 页

</span>

}

</div>

在操纵中(Index)的部分代码:

public ViewResult Index(int? pageIndex ,string search) { int pageInd = pageIndex.HasValue ? pageIndex.Value : 1;  ViewBag.PageCount = (int)Math.Ceiling(result.Count() / 20.0); return View(result.OrderBy(t => t.PID).Skip((pageInd - 1) * 20).Take(20)); }

这个意思是以二十也一页作为当前页.

在视图页中需要添加如下代码:@using (Html.BeginForm())

{视图页中的所有代码如: 性别: @Html.TextBox("sex") 这个是指按性别进行过分页 <input type="submit" value="查询" />   最后调用@Html.Action("PageIndexKey", "PageIndex", new { pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })}  其他的和第一中相符  。

示例:

List<string> s = new List<string>();

s.Add("张军");

//后面再添加四十条

ViewBag.PageCount = (int)Math.Ceiling(s.Count() / 20.0);

return View(s.Skip((pageInd - 1) * 20).Take(20)); 在试图页的调用是:@Html.Action("PageIndex", "PageIndex", new { action = "Index", controller = "LogController", pageCount = ViewBag.PageCount, currentPage = ViewBag.CurrentPage })

时间: 2024-09-29 16:43:55

Asp.net MVC3表格共用分页功能的相关文章

asp.net GridView 表格之分页显示与翻页功能及自定义翻页页码样式

一.实现分页功能  GridView实现分页只需要在属性框中将AllowPaging(是否在GridView中打开分页功能)设置为true即可 有时打开分页后不显示页码 确保AllowCustomPaging(是否打开对自定义分页的支持)为False即可 二.实现翻页功能  如何点击页码实现翻页呢? 在属性框中事件选择设置PageIndexChanging(在Grid View的当前索引页正在更改事触发)这一事件 后台代码如下 /// <summary> /// 翻页操作 /// 在GridV

ASP.NET中控件实现分页功能/Repeater控件分页

//repeate.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="repeate.aspx.cs" Inherits="repeate" %> <%@ Import Namespace="System.Data" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XH

SPA项目开发动态树、数据表格、分页功能

SPA项目开发 1.修改左侧动态树 LeftNav.vue 1 <template> 2 <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" 3 text-color="#fff" active-te

如何用angularjs制作一个完整的表格之二__表格分页功能

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

ASP.NET中利用DataGrid的自定义分页功能

ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页 ASP.Net中的DataGrid有内置分页功能, 但是它的默认的分页方式效率是很低的,特别是在数据量很大的时候,用它内置的分页功能几乎是不可能的事,因为它会把所有的数据从数据库读出来再进行分页, 这种只选取了一小部分而丢掉大部分的方法是不可去取的. 在最进的一个项目中因为一个管理页面要管理的数据量非常大,所以必须分页显示,并且不能用DataGrid的内置分页功能,于是自己实现分页. 下面介绍一下我在项目中用到的分页

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

版本: django:2.1.7 python:3.7 Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如下: paginator = Paginator(stat_list, numtmp) try: flight_stats = paginator.page(1) except PageNotAnInteger: flight_stats =

分页功能的实现

使用repeter控件来实现功能. 功能查看: 前台代码的是实现如下: 1 <asp:Repeater ID="Repeater1" runat="server"> 2 <HeaderTemplate> 3 <table class="frmtable"> 4 <tr onmouseover="this.style.backgroundColor='#FF0000'" onmouseo

MVC5+EF6 (附加分页功能)

我们对之前的Views à Account à Index.cshtml 进行修改以完成今天的示例. 界面样式修改前: 下面对Views à Account à Index.cshtml进行如下修改: 应用布局页 _LayoutAdmin.cshtml 2. 将HTML部分body之外的全部删掉,只留下正文内容,运行这个页面. 对样式做一些小调整,最终变成如下样式. (调整样式的步骤略,大家可以直接查看源码) 通过Create New 新建两条测试数据,为后面分页做准备,后面每3条分一页. 目前

ASP.NET MVC3 系列教程 - 模型

I:基础绑定的实现 1.在前面的两篇基础文章(路由 及 控制器&视图)当中,还没对QueryString的绑定进行介绍,因为我觉得它更适合放在这一章节中去介绍.我们在用WebForm去开发的时候,有时候会利用到QueryString去做一些功能如:http://localhost/First/QueryString.aspx?Sort=Desc,在MVC中,它的实现有两种方式: 控制器代码 public class QueryStringController : Controller { pub