最近在做分页查询的功能，在网上也翻看了不少，但是自己的吸收能力就差了好多，而且当时最大的想法就是，怎么就没有我想要的那种，既是easyui的，又要用mvc的架构，还要能够实现底层的分页传值，用.net平台写的demo，那时就想，等我做出来了，我也要写一篇分页查询的博客，专门为了实现这种需求来做的demo。

效果图

前台view

[html] view plaincopyprint?

<table id="list_data" class="easyui-datagrid" style="width:1075px;height:300px" cellpascing="0" cellpadding="0" ></table>

[javascript] view plaincopyprint?

<script type="text/javascript">
//表格的样式
$(function(){
$('#list_data').datagrid({
title: '建议',
iconCls: 'icon-view', //图标
loadMsg:"数据加载中，请稍后......",
width:1056,
height:'auto',
nowrap:false,
striped:true,
border:true,
collapsible:false, //是否可折叠
fit:true, //自动大小
url: "/EvaluationSuggestion/GetData", //controller的地址，controller的名字+返回json的方法
remoteSort:false,
singleSelect:true, //是否单选
pagination:true, //分页控件
rownumbers: false, //行号
columns: [[
{ field: 'SuggestionContent', title: '建议', width: '1056' }, //选择
]],
});
//设置分页控件
var p=$('#list_data').datagrid('getPager');
$(p).pagination({
pageNumber:1, //默认显示第几页
pageSize:10,
pageList:[5,10,15],
beforePageText:'第',
afterPageText:'页共{pages}页',
displayMsg:'当前显示{from}-{to}条记录共{total}条记录'
});
});
</script>

解说：如果想要进行分页，首先就必须将datagrid的属性pagination设置为true。

pager是分页栏，这个标签用来设置分页的总体参数，

url是链接的重要根地址，pager标签会在这个链接的基础上附加分页参数。

Controller.cs

[csharp] view plaincopyprint?

#region 查询建议的controller
/// <summary>
/// 查询建议的controller
/// </summary>
/// <returns>返回值action，用于与view层交互</returns>
public ActionResult SuggestionIndex()
{
return View();
}
#endregion
#region 将建议数据转换成json字符串
/// <summary>
/// 将建议数据转换成json字符串
/// </summary>
/// <returns>返回json字符串</returns>
public JsonResult GetData()
{
IEvaluationSuggestionWCF suggestion = ServiceFactory.GetEvaluationSuggestion();
List<EvaluationSuggestion> lstResut = new List<EvaluationSuggestion>();
//接收datagrid传来的参数
var pageIndex = int.Parse(Request["page"]); //当前页
var pageSize = int.Parse(Request["rows"]); //页面行数
var total = 0;
lstResut = suggestion.QuerySuggestionbyPage(pageSize, pageIndex, out total);
var data = new
{
total,
rows = lstResut
};
return Json(data, JsonRequestBehavior.AllowGet);
}
#endregion

解说：page和rows是直接可以从前台获取的。data设置数据格式，转换成Json字符串后，能够在分页中正确获取。

服务端

[csharp] view plaincopyprint?

#region 分页查询 + 排序：
/// <summary>
/// 分页查询 + 排序
/// </summary>
/// <typeparam name="Tkey">泛型</typeparam>
/// <param name="pageSize">每页大小</param>
/// <param name="pageIndex">当前页码</param>
/// <param name="total">总数量</param>
/// <param name="orderbyLambda">排序条件</param>
/// <param name="isAsc">是否升序</param>
/// <returns>IQueryable 泛型集合</returns>
public IQueryable<T> LoadPageItems<Tkey>(int pageSize, int pageIndex, out int total, Func<T, Tkey> orderbyLambda, bool isAsc)
{
total = MyBaseDbContext.Set<T>().Count();
if (isAsc)
{
var temp = MyBaseDbContext.Set<T>().OrderBy<T, Tkey>(orderbyLambda)
.Skip(pageSize * (pageIndex - 1))
.Take(pageSize);
return temp.AsQueryable();
}
else
{
var temp = MyBaseDbContext.Set<T>().OrderByDescending<T, Tkey>(orderbyLambda)
.Skip(pageSize * (pageIndex - 1))
.Take(pageSize);
return temp.AsQueryable();
}
}
#endregion

解说：这个是我们底层的类库，我直接贴过来的，底层使用EF，涉及到lambda表达式。不过除去形式，分页查询的思想都是一样的，真分页，根据记录总数，每页记录数和当前页码，获取当前页码的数据集合。页数=总记录数/每页记录数。当前页码的数据集合，向数据库传递条件筛选，from（当前页码-1）*每页记录数 to当前页码*每页记录数获取当前页码数据集合。具体实现自己来做吧。

（easyui datagrid+mvc+json）之asp.net分页查询相关推荐

多年以前提高asp.net分页查询效率的一个实例
2004年数据库查询优化实例情况:sqlserver 2000,资源表,记录近30万条.资源有一个整数的id字段,自动增量,但是资源可以被删除.所以,id并不连续. 用.net SqlDataAda ...
asp.net分页查询
分页查询 1.数据库 USE [master] GO /****** Object: Database [RbacDB] Script Date: 2020/6/2 23:51:00 ******/ ...
jquery easyui datagrid mvc server端分页排序筛选的实现
1自定义一个ModelBinder public class filterRule{public string field { get; set; }public string op { get; s ...
easyui datagrid 绑定json对象属性的属性
今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一 ...
关于easyui datagrid分页的json格式
2019独角兽企业重金招聘Python工程师标准>>> 在网上找了很多资料,始终无法知晓easyui如果分页的话,需要传哪些值,并且json的组成格式是什么样的. 看了一篇质量比较好 ...
.NET Core使用EF分页查询数据报错：OFFSET语法错误问题
在Asp.Net Core MVC项目中使用EF分页查询数据时遇到一个比较麻烦的问题,系统会报如下错误: 分页查询代码: 1 var newQuery = query.Skip((condition. ...
easyui datagrid json分页实例
原文章地址1 原文章地址2 参考这两篇文章实现了自己的分页 jsp页面 <script type="text/javascript"> $(function ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...
YbSoftwareFactory 代码生成插件【八】：基于JQuery EasyUI、Web Api的 ASP.NET MVC 代码生成插件...
"YbRapidSolution for MVC"是 YbSoftwareFactory 最新的代码生成插件,可一键生成基于ASP.NET MVC的解决方案源代码.其生成的 Dem ...

（easyui datagrid+mvc+json）之asp.net分页查询

效果图

前台view

Controller.cs

服务端

（easyui datagrid+mvc+json）之asp.net分页查询相关推荐

最新文章

热门文章