datagrid展示数据(带分页、排序)

1.view 代码:

<div style="width:100%;height:100%;">
    <table class="easyui-datagrid" style="width:100%;height:95%" data-options="singleSelect:true,url:‘@Url.Action("GetList")‘,method:‘get‘,toolbar:toolbar" pagination="true" sortname="Id" sortorder="asc">
        <thead>
            <tr>
                <th style="width:10%" data-options="field:‘Id‘" sortable="true">编号</th>
                <th style="width:15%" data-options="field:‘Name‘" sortable="true">登录名</th>
                <th style="width:15%" data-options="field:‘RealName‘" sortable="true">姓名</th>
                <th style="width:15%" data-options="field:‘Sex‘" sortable="true">性别</th>
                <th style="width:15%" data-options="field:‘Email‘">邮箱</th>
                <th style="width:15%" data-options="field:‘Phone‘">电话</th>
                <th style="width:15%" data-options="field:‘Address‘">地址</th>
            </tr>
        </thead>
    </table>
</div>

读取数据:GetList 的action

2.Control 代码:

  [HttpGet]

public string GetList(int page,int rows, string sort,string order)

{

   int total = userService.GetList(x => x.IsDeleted == false).ToList().Count();  //数据总数

var list = userService.GetQueryableList(x => x.IsDeleted == false);

   var sortList = userService.Sorting(list, sort, order);   //排序

  var pageList = userService.Paging(sortList, page, rows);   //分页

Dictionary<string, object> data = new Dictionary<string, object>();

data.Add("total", total);

data.Add("rows", pageList);

var json = JsonConvert.SerializeObject(data);

  return json;

}

时间: 2024-08-04 23:36:21

datagrid展示数据(带分页、排序)的相关文章

jsp页面通过ajax取值/展示数据及分页显示

jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> 2 function getComposition(pageno){ 3 4 //alert(pageno); 5 $.ajax( 6 { 7 url:'<%=basePath%>composition/compositionlist', 8 type:'post', 9 data:"pageno="+pageno, 10 succes

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

Linechart + Datagrid 互动展示数据 (Linechart自定义数据点选择线)

如上图示,在linechart中添加红色Y线,拖动该线的过程中,经过数据点时,会实时更新datagrid中对应的X.Y值数据. 实现要点: 1.linechart添加Y线 继承mx.charts.chartClasses.ChartElement,自定义Y线. package { import flash.display.Graphics; import flash.geom.Point; import flash.text.TextField; import mx.charts.chartCl

easyui datagrid 客户端搜索、分页、排序

easyui datagrid的排序默认是服务器端排序,可以用sorter实现客户端排序[2]:客户端分页可用filter实现[3]:客户端搜索同样可以用filter实现. 不多说直接上代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" con

Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子节点,打开不同的tab页,加载与节点对应的表数据 2.在上述打开页面中,进行新增,编辑,复制等操作,确保新增.复制等操作生成的数据只在该页面可见. 涉及思路与关键代码 1.单击左侧树时,叶子节点时,新增.激活一个tab页,打开.激活之前,设置tab页id属性值为树节点的ID,设置title属性为节点

ExtJS4.2 仅需配置URL动态加载GridPanel列(带分页)

最近做ExtJS一直想做个傻瓜式的GridPanel,今天折腾了一天,从GitHub找到的老外写的解决方案, 在他的基础上做了一些改动,增加了分页,增加了columns手动配置(原本只能动态生成),大家有兴趣可以自由扩展,我做了很详细的注释 效果图如下,仅需在html页面引入ext.all,并创建自定义控件,配置url即可创建带分页效果的GirdPanel 代码: 效果图: 一.动态加载自定义控件 自定义脚本包括两部分:DynamicGrid.js和DynamicReader.js 将Ext目录

EasyUI实现展示数据代码

下面是View显示代码: @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script type="text/javascript"> $(function () { var editRow = undefined; $("#tb1").datagrid({ fitColumns: true, striped: tru

企业级控件库之大数据量分页控件(转)

在上篇:我介绍了原创企业级控件库之组合查询控件,这篇我将给大家介绍:企业级控件库之大数据量分页控件.  摘要  说到分页,大家采用的方法各有千秋,分页在一个中大型软件项目中对数据的快速呈现起到很关键的作用,试想一个数据量上几十万或者几百万的数据表,要是没有分页功能会是一个什么样的效果.总的说来,大家采用的分页方法大同小异,但到底那种方法才是最佳的呢,各有各的看法,让数据说话最有效.今天我给大家分享一个WinForm下大数据量分页控件(当然分页思想也可用于WebForm).虽然不能说是最佳的,但在

大数据oracle分页查询

ROWNUM 可能都知道ROWNUM只适用于小于或小于等于,如果进行等于判断,那么只能等于1,不能进行大于的比较. ROWNUM是oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,依此类推. ROWNUM总是从1开始,不管当前的记录是否满足查询结果,ROWNUM返回的值都是1,如果这条记录的值最终满足所有的条件,那么ROWNUM会递加,下一条记录的ROWNUM会返回2,否则下一条记录的ROWNUM仍然返回1. 理解了这一点,就清楚为什么一般的ROWNUM大于某个