MVC异步分页代码分享
如图：
1、控制器代码
//
// GET: /AjaxUser/
shopEntities shop = new shopEntities();
public ActionResult Index()
{
return View();
}
public ActionResult loadjson()
{
int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);
int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse(Request["pageIndex"]);
int totalCount = shop.tbl_admin.Count();
//给前台userinfo所有的数据，并且是json格式
var allorder = shop.tbl_admin.OrderBy(u=>u.id)
.Skip(pageSize*(pageIndex-1))
.Take(pageSize)
.ToList();
//接受一个对像，内部把此对象使用javaScript序列化类对象志字符串，发送到前台
var data = from u in allorder select new { u.id,u.realname,u.sex};
string strNav = PageNavHelper.ShowPageNavigate(pageIndex,pageSize,totalCount);
var result = new {Data=data, NavStr=strNav };
return Json(result, JsonRequestBehavior.AllowGet);
}
2、Html代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/NavPage.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
$(function () {
//页面加载完成后从后如加载当前页数据
initTable();
});
//初始化表格数据
function initTable(queryData)
{
$.getJSON("/AjaxUser/loadjson",queryData, function (data) {
var tb = $("#tbList");
//先移除旧的，添加新的
$("#tbList tr[type=data]").remove();
for (var i = 0; i < data.Data.length; i++)
{
var strTr = "<tr type='data'>";
strTr += "<td>" + data.Data[i].id + "</td>";
strTr += "<td>" + data.Data[i].realname + "</td>";
strTr += "<td>" + data.Data[i].sex + "</td>";
strTr += "<td><a UId='" + data.Data[i].id + "' href='javascript:void(0)'>修改</a>" +
"<a UId='" + data.Data[i].ID + "' href='javascript:void(0)'>删除</a></td>";
strTr += "</tr>";
tb.append(strTr);
}
$("#Nav").html(data.NavStr);
//绑定分页标签的点击事件
$(".pageLink").click(function () {
//把页码弹出来
var strHref = $(this).attr("href");
var queryStr = strHref.substr(strHref.indexOf('?') + 1);
//alert(queryStr);
initTable(queryStr);
return false;
});
});
}
</script>
</head>
<body>
<div>
<table id="tbList">
<tr>
<td>id</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</table>
<div id="Nav" class="paginator">
</div>
</div>
</body>
</html>
3、分页类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
namespace MvcTest4.Models
{
public class PageNavHelper
{
//主要就是输出分页的超级链接的标签
//自定义分页Helper扩展
public static string ShowPageNavigate(int currentPage, int pageSize, int totalCount)
{
var redirectTo = HttpContext.Current.Request.Url.AbsolutePath;
pageSize = pageSize <= 0 ? 3 : pageSize;
var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
var output = new StringBuilder();
if (totalPages > 1)
{
//if (currentPage != 1)
{//处理首页连接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
}
if (currentPage > 1)
{//处理上一页的连接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize);
}
else
{
// output.Append("<span class='pageLink'>上一页</span>");
}
output.Append(" ");
int currint = 5;
for (int i = 0; i <= 10; i++)
{//一共最多显示10个页码，前面5个，后面5个
if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
{
if (currint == i)
{//当前页处理
//output.Append(string.Format("[{0}]", currentPage));
output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
}
else
{//一般页处理
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);
}
}
output.Append(" ");
}
if (currentPage < totalPages)
{//处理下一页的链接
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize);
}
else
{
//output.Append("<span class='pageLink'>下一页</span>");
}
output.Append(" ");
if (currentPage != totalPages)
{
output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
}
output.Append(" ");
}
output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行
return output.ToString();
}
}
}
4、分页CSS
body {
}
.paginator {
font: 12px Arial, Helvetica, sans-serif;
padding: 10px 20px 10px 0;
margin: 0px;
}
.paginator a {
border: solid 1px #ccc;
color: #0063dc;
cursor: pointer;
text-decoration: none;
}
.paginator a:visited {
padding: 1px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
}
.paginator .cpb {
border: 1px solid #F50;
font-weight: 700;
color: #F50;
background-color: #ffeee5;
}
.paginator a:hover {
border: solid 1px #F50;
color: #f60;
text-decoration: none;
}
.paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover {
float: left;
height: 16px;
line-height: 16px;
min-width: 10px;
_width: 10px;
margin-right: 5px;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-family: Arial,SimSun;
padding: 0 3px;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Asp.Net中的三种分页方式总结
通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等.这里分别做总结. 第一种:使用GridView自带分页,这种是最简单的分页方法. 前台的方法: 复制代码 代码如下: <asp:GridView ID="GridView1" AllowPaging="true" runat="server" onpageindexchanging="G
-
ASP.NET无刷新分页简单实现
下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习. 1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvarchar(4000) set @sql = 'select top ' + Convert(varchar, @PageSize) + ' * from T_Test where [type]=1 and id not in (selec
-
Asp.net GridView使用大全(分页实现)
GridView自带的分页功能实现: 要实现GrdView分页的功能操作如下:1.更改GrdView控件的AllowPaging属性为true.2.更改GrdView控件的PageSize属性为 任意数值(默认为10)3.更改GrdView控件的PageSetting->Mode为Numeric等(默认为Numeric)该属性为分页样式.GridView属性设置好了,从页面上也能看到分页样式. 现在开始实现分页的功能: 1.在<<asp:GridView ID=......>后添加
-
ASP.NET MVC分页和排序功能实现
分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理.好了,废话说多了.现在我们进入正题: 这里,我打算使用EF Code-First方式分页控件就是用PagedList.MVC,来做分页,对于排序,实现的思路是,加载数据出来之后,默认是升序排序,然后我们点击一下相应的列标题,就按照该字段降序排序,查数据.思路明确了,就开始干吧! 1.首先新建一个空白的MVC项目,在Model
-
ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama
-
ASP.NET MVC 2右键菜单和简单分页实例讲解
右键菜单非常方便,很多时候会用到.这篇文章将使用一个JQUERY的插件在ASP.NET MVC中实现右键菜单.本文还将介绍一下在ASP.NET MVC中如何实现简单的分页.效果如下图: 新建一个asp.net mvc应用程序.将此插件放入Scripts文件夹.并在页面上引用. 定义右键菜单: <div class="contextMenu" id="myMenu1"> <ul> <li id="detail">
-
ASP.NET 高性能分页代码
最近给分页快搞死,记得之前曾经发过修改DW ASP分页的方法,后来又写过手工打造的ASP分页,现在进入.NET当然要配合存储过程打造纯手工高性能分页了. 为什么会叫做高性能,为什么要手工打造,不使用.NET现有的分页控件呢?这个还要追溯到我修改DW ASP分页的时候,那个我还不怎么懂程序这个东西,只会修修补补,就更不要去谈什么性能问题.当时改的很心烦,接着叫我的私人技术总监张总帮我看看,当时张总就以一种不屑一顾的眼神往着我,说了句话:值得吗? 接着到我手工打造ASP分页,又搞不下去了,张总丢给我
-
一句话轻松搞定asp.net分页
rows 是客户端传过来的行数,page是页码,传参就需要就两个参数就行,sql语句中_row 和_page 自己声明的局部变量,值还是相应的row 和page ,为了运算而已. 用数据库类获得它的DataTable,转换为json格式通过一般处理程序传到客户端,客户端显示就ok了.这里我使用的是easyui datagrid进行接收和传参.这是大体的思路. string sql = "select top " + rows + " * from TestData where
-
asp.net分页功能实现
说一下实现分页的思路 这里的分页用到了一个组件 AspNetPage.dll,这个组件大家可以到网上去下载,我这里就不提供了 添加最近到工具箱中这样我们就可以像其他控件一样拖拽使用了 如图DataPage是在工具箱中的,至于怎么添加你们百度吧 拖拽到页面中如图 这个是我加完样式后显示的效果,怎么样是不是你们想要的了,如果不是你们还可以修改样式样式稍候奉上 先来看看要怎么使用 <webdiyer:AspNetPager ID="AspNetPager1" runat="s
-
Asp.Net数据控件引用AspNetPager.dll分页实现代码
1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13,小生不才: 2.如有什么不对的地方,还希望大家指出,一定虚心学习: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 第一步:首先是下载一个AspNetPager.dll 下载地址 AspNetPager.rar第二步:在项目的bin文件夹下引用AspNetPager.dll 如图: 第三步:在工具箱添加AspNetPager控件,如图: 接下来再如图: 这样