使用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# 映射对比测试

    c#  映射对比测试(测试对象,测试案例,测试结果) 测试组件对象: TinyMapper-EmitMapper-AutoMapper-NLiteMapper-Handwritten 对比测试案例: ...

  2. lame边录音边转换

    文章出处:http://big-joe.blog.sohu.com/88902836.html void CViewTFreqList::RecFileInit(LPCTSTR sFileName,  ...

  3. Chapter 2: Design the user experience

    Apply the user interface design for a web application 介绍了Css的常用属性和html5的新element,以及Htmlhelper的简单方法,如 ...

  4. SpringMVC——返回JSON数据&&文件上传下载

    --------------------------------------------返回JSON数据------------------------------------------------ ...

  5. C#（转自wiki）

    C#是微软推出的一种基于.NET框架的.面向对象的高级编程语言.C#的发音为"C sharp",模仿音乐上的音名"C♯"(C调升),是C语言的升级的意思.其正确 ...

  6. multipath test

    [root@rac02 mnt]# multipath -llmpathb (36005076300810df6f800000000000005) dm-3 IBM,2145size=50G feat ...

  7. h5的拖放（drag和drop）

    被拖曳元素发生的事件=== ondragstart:拖拽元素开始被拖拽的时候触发 ondragend:拖拽完成后触发 目标元素发生的事件=== ondragenter:拖曳元素进入目标元素的时候触发 ...

  8. EntityFrameWork使用

    1.简单查询: SQL: ? 1 SELECT * FROM [Clients] WHERE Type=1 AND Deleted=0 ORDER BY ID EF: ? 1 2 3 4 5 6 7 ...

  9. Head First设计模式之装饰者模式（Decorator Pattern）

    前言: 本节将深度讨论继承滥用问题,将会学到使用对象组合的方式,在运行时装饰类,在不修改任何底层代码的情况下,给对象赋予新的职责. 1.    基本需求:咖啡连锁店业务扩张需要重新设计订单系统 背景: ...

  10. [2016.01.18]文本替换专家 v5.3

    文本替换专家,界面简洁易用,功能强大实用.支持大小写匹配,支持多级目录.多行文本.多种文件格式的同时批量查找和批量替换.智能准确的区分ANSI.UTF-8(包括无BOM的UTF-8).Unicode. ...