使用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. POJ 1321 DFS

    题意:POJ少见的中文题,福利啊. 思路: 一开始也没有思路呃呃呃 . 裸搜,连样例都过不去...参照了网上的题解:一行一行DFS 茅塞顿开啊. #include <cstdio> #in ...

  2. NSXMLParser解析xml格式

    NSXMLParser解析xml格式的数据 用法如下: 首先,NSXMLParser必须继续NSXMLParserDelegate协议 @interface XMLHelper : NSObject ...

  3. Tomcat口令猜解工具【Python脚本】

    Tomcat 服务器网页部署,登录需用户名/密码,编写了一个简单的Python脚本来测试一些简单的弱口令. 测试环境:Tomcat版本 7.0 登录界面采用basic认证,Base 64加密一下,模拟 ...

  4. Jquery面试题

    1.改变一个标签中的属性的值? 分为两种情况: 改变style中的css样式属性值: $("ID").css({color:red,font-size:30px....});   ...

  5. css实现分割线

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. Ecstore会员密码加密方式破解

    <?php //以下是加密方式,亲测有效 $string_md5 = md5(md5("密码")."用户名"."注册时间");//三个 ...

  7. Java后台判断请求来自PC端还是移动端

    核心代码

  8. 听桶哥讲session和cookie

    首先,cookie和session是什么关系? 他们的关系很简单,利用和被利用的关系. 话说,由于http协议的无状态特性,同一client两个不同的请求之间完全独立,没有很好的办法进行一些数据共享, ...

  9. 如何导出和导入mysql数据(数据迁移)

    . 导出数据库数据 mysqldump -uroot -p dp_db > dumpout.sql 其中 root是账户名 dp_db是需要导出的数据库名称 dumpout.sql存储导出的数据 ...

  10. 【转】windows server 2012清除并重建SID

    windows server 2012清除并重建SID 2012-09-17 17:51:51 标签:SID windows server 2012 原创作品,允许转载,转载时请务必以超链接形式标明文 ...