使用easyui可以很方便的开发web程序，这儿仅展示一个后台使用mvc来实现分页的示例，截图如下

示例代码如下

1. 创建模型类，代码如下

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace EasyuiDemo.Models

{

    public class Student

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

    }

}

2. 因为easyui加载数据的格式有要求，所以创建一个模型包装类以方便序列化为json，代码如下

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace EasyuiDemo.Models

{

    public class PageModel<T>

    {

        public int total { get; set; }

        public List<T> rows { get; set; }

    }

}

3. 在控制器中创建一个静态的模型集合以作为数据源，并提供对应的处理分页的动作，代码如下

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using EasyuiDemo.Models;

using Newtonsoft.Json;

namespace EasyuiDemo.Controllers

{

    public class HomeController : Controller

    {

        private static List<Student> list;

        static HomeController()

        {

            list = new List<Student>();

            list.Add(new Student() { ID = , Name = "aa", Age =  });

            list.Add(new Student() { ID = , Name = "bb", Age =  });

            list.Add(new Student() { ID = , Name = "cc", Age =  });

            list.Add(new Student() { ID = , Name = "dd", Age =  });

            list.Add(new Student() { ID = , Name = "ee", Age =  });

            list.Add(new Student() { ID = , Name = "ff", Age =  });

            list.Add(new Student() { ID = , Name = "gg", Age =  });

            list.Add(new Student() { ID = , Name = "hh", Age =  });

            list.Add(new Student() { ID = , Name = "ii", Age =  });

            list.Add(new Student() { ID = , Name = "jj", Age =  });

        }

        // GET: Home

        public ActionResult Index()

        {

            return View();

        }

        public string Page()

        {

            int page = ;

            int rows = ;

            if(Request.Params["page"] != null)

            {

                page = Convert.ToInt32(Request.Params["page"]);

            }

            if (Request.Params["rows"] != null)

            {

                rows = Convert.ToInt32(Request.Params["rows"]);

            }

            PageModel<Student> pdata = new PageModel<Student>();

            pdata.total = list.Count;

            pdata.rows = list.GetRange(rows * (page - ), rows);

            return JsonConvert.SerializeObject(pdata);

        }

    }

}

4. 视图页面代码如下

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <link rel="stylesheet" href="~/Content/themes/default/easyui.css"/>

    <script src="~/scripts/jquery-1.11.3.js"></script>

    <script src="~/scripts/jquery.easyui-1.4.5.js"></script>

    <script>

        $(function () {

            $("#dg").datagrid({

                url: "/home/page",

                columns: [[

                    { field: 'ID', title: 'ID', width: 100 },

                    { field: 'Name', title: 'Name', width: 100 },

                    { field: 'Age', title: 'Age', width: 100 }

                ]],

                pageSize: 5,

                pageList: [5, 10],

                pagination: true

            })

        })

    </script>

</head>

<body>

    <div id="dg">

    </div>

</body>

</html>

datagrid设定pageSize时必须设定pageList，且pageSize的值要在pageList中，否则就是用默认的10.

如上就完成了datagrid的分页是用。

EasyUI DataGrid 分页实现示例的更多相关文章

  1. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  2. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  3. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  4. easyUI datagrid 分页参数page和rows

    Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...

  5. EasyUI Datagrid 分页显示（客户端）

    转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  7. easyui datagrid 分页略解

    easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的 ...

  8. jquery easyui datagrid 分页详解

    由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...

  9. easyui datagrid分页

    datagrid分页设置 pagination="true" 貌似是不行的!  只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...

随机推荐

  1. c# 引用百度地图

    <script type="text/javascript"> //创建和初始化地图函数 var map = new BMap.Map("home" ...

  2. Scrolliview

    package com.example.scrollview; import android.os.Bundle;import android.app.Activity;import android. ...

  3. linux 公社的网友出品的 Qt5.5 安装脚本，copy过来了

    http://www.linuxdiyf.com/linux/13046.html Qt5.5已经发布了,前两天PyQt也很快推出了一个5.5的对应版本.试验了一下(花了个周末啊!),真是越来越好用了 ...

  4. RMAN备份与恢复之初入茅庐

    理解数据库备份 所谓备份实际上是把数据库复制到转储设备的过程. 从备份方式来看数据库备份分为物理备份和逻辑备份,物理备份是把构成数据库的所有文件拷贝到指定的位置的过程,而逻辑备份只是利用SQL语言从数 ...

  5. ［摘抄］iOS App icon、启动页、图标规范

    以下内容都是我在做App时通过自己的经验和精品的分析得来的,希望会帮助到你.但是有时个别情况也要个别分析,要活学活用. 一. App  Icon 在设计iOS App Icon时,设计师不需要切圆角, ...

  6. Docker学习（2）

    列出本地镜像,位于/var/lib/docker下 ➜ ~ sudo docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE ubuntu ...

  7. Android延时执行调用的几种方法

    一.开启新线程 new Thread(new Runnable(){        public void run(){            Thread.sleep(XXXX);          ...

  8. Lua Serial/Serialize/Serializer/Serializing 序列化/反序列化

    第一篇 有点内容的.. 支持 表/函数/数值/布尔/字符串 做 键.值 支持 循环/嵌套 支持 元表(支持弱表分析) 支持 表被任意数量.位置引用 支持 扩展引用外部 支持 格式化输出 支持 嵌套优化 ...

  9. 印刷电路板（PCB）的材料

    以玻璃为基础材料的板材可以在高达150℃到250℃的温度下使用.可选的介质材料有: FR4,介电常数ε0为4.6 环氧材料,介电常数ε0为3.9: 聚酰亚胺,介电常数ε0为4.5. 另外,以聚四氟乙烯 ...

  10. Nginx-默认不压缩HTTP/1.0与长连接的关系

    在移动的 http 请求量和联通不相上下的前提下,移动的 http response 带来的网络流量是联通的 2.5 倍.移动大概有 3 成的请求都没有做压缩,而联通几乎都是经过压缩的.那些没有经过压 ...