使用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. 新建STM32工程

    1) 2)保存 3)选择公司和芯片的型号,STM32F103C8T6,64kB Flash, 20kB SRAM. 4)手动添加启动代码 5)新建如下文件夹 6)回到工程,选中target,右键Add ...

  2. Linux中Main函数的执行过程

    1. 问题:Linux如何执行main函数. 本文使用一个简单的C程序(simple.c)作为例子讲解.代码如下, int main() { return(0); } 2.  编译 -#gcc -o ...

  3. linux部署不同版本mysql

    测试环境部署过程中经常会遇到同一个服务器上部署两个不同版本的mysql数据库,在部署过程中也会有各种各样的问题,现将部署多版本mysql的方法总结如下: 1.下载mysql版本 http://down ...

  4. java 运算符使表达式结果类型自动提升

    1.表达式中的自动类型提升: 表达式求值时,Java自动的隐含的将每个byte.short或char操作数提升为int类型,这些类型的包装类型也是可以的. 例如:short s1 = 1; s1 = ...

  5. spring访问静态资源出错，No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  6. 初遇 dotcloud

    逛园子的时候看到新浪SAE,正学习建站呢,好东西.(论环境的影响...) 不过发现新浪SAE只支持 Python2,我更喜欢 Python3 e...找找其他的,发现了 dotcloud,遂试试,下面 ...

  7. （转）A Survival Guide to a PhD

    Andrej Karpathy blog About Hacker's guide to Neural Networks A Survival Guide to a PhD Sep 7, 2016 T ...

  8. dhtmlxScheduler日程安排控件

    dhtmlxScheduler是一个JavaScript日程安排控件 官方网站:http://www.dhtmlx.com/在线帮助文档:http://docs.dhtmlx.com/doku.php ...

  9. jquery处理json对象

    在服务器端的php脚本: <?php $data['id'] = 1; $dat['name'] = "mary"; $da['red']= array_merge($dat ...

  10. spring常用注解

    使用注解构造IOC.替代传统的applicationContext.xml配置<bean/>和<property/> 传统的spring要在applicationContext ...