(easyui datagrid+mvc+json)之asp.net分页查询

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

效果图

前台view

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

  #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字符串后,能够在分页中正确获取。

服务端

#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当前页码*每页记录数获取当前页码数据集合。具体实现自己来做吧。

时间: 2024-10-06 04:10:26

(easyui datagrid+mvc+json)之asp.net分页查询的相关文章

jquery easyui datagrid mvc server端分页排序筛选的实现

1自定义一个ModelBinder public class filterRule { public string field { get; set; } public string op { get; set; } public string value { get; set; } } public class dataGridFilter { public dataGridFilter() { filterRules = new HashSet<filterRule>(); } publi

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

在使用easyui,datagrid时,JSON中的如果含有换行符,则不能显示数据

http://www.xuebuyuan.com/2103538.html 每项值需处理换行符 item = item.Replace("\r\n", ""); //或\\r\\n替换换行符 http://www.cnblogs.com/lhws/archive/2013/08/16/3262301.html 在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n在textarea中输入回车符 在js读取textarea

easyui datagrid 绑定json对象属性的属性

今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一转,想到了datagrid的列属性formatter,formatter提供了row,这样的话我们在formatter里面指定一下不就可以了吗 于是~ function dgDevice_datagrid() { $('#dgDevice').datagrid({ url: 'DeviceList.

EasyUI Datagrid的简单使用

此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Datagrid上展示出来并使用分页控件进行分页. 项目.框架.数据库:创建的是Maven项目,采用Spring+SpringMVC+Mybatis框架,数据库SQL Server 2005 1.创建数据库表 表结构: 表数据: 2.通过mybatis逆向工程映射TreeTestTable(表名略丑)

asp.net mvc easyui datagrid分页

提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分页. easyui datagrid分页要求数据采用的格式 :{total:2,row:[]}, 在asp.net mvc 中服务器端只要返回这符合这样格式的json数据就好. 页面前端: 服务器端: 附带asp.net 结合 easyui 增删改查的例子: asp.net mvc easyui d

.net MVC模式下easyui datagrid控件分页

此参照一位仁兄代码,稍作修改 视图代码: <div id="tab" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:800px;height:400px"> <div title="****" style="padding:0px;"> <div class="

Easyui+EF+MVC+WCF实现分页

高校平台中,后台使用EF框架,前端使用MVC结合Easyui,前端和后台的链接采用WCF传递数据,现在来说说是如何实现分页的. 页面:mvc+Easyui 采用部分视图的方式调用拼接表格的部分视图,url放入页面加载时调用的方法(controller+方法名),例如我的controller为Template,方法名为QueryTemplateData. <div id="ContentAreas"> @*先调用 对应的业务Controller中的表头数据*@ @{Html.

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