使用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. web view调h5的方法死活调不到

    (WebViewJavascriptBridge注册方法都能调用,只有callhandlename时无论如何也没响应)这个问题真是纠缠我好久了 webview评论区刷新问题终于找到原因了 ,我试着把咨 ...

  2. Python实例1

    1.有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 错解: 正解: 源码: #!/usr/bin/python for i in range(1,5): for j in ...

  3. hiho一下18周 RMQ问题再临

    RMQ问题再临 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 终于,小Hi和小Ho踏上了回国的旅程.在飞机上,望着采购来的特产--小Hi陷入了沉思:还记得在上上周他们去 ...

  4. linux 模块常用命令

    lsmod | grep pcspkr  查看pcspkr模块是否运行modprobe -r pcspkr   删除pcspkr模块modinfo pcspkr       查看pcspkr模块信息m ...

  5. it市场

    SAP收购Sybase意欲何为 http://tech.diannaodian.com/dw/data/sybase/2012/0925/199681.html 德国行业管理软件解决方案提供商SAP宣 ...

  6. LeetCode---Stack && Heap

    402. Remove K Digits 思路:一次判断字符若比栈顶字符大则入栈,若小则pop,同时k--,直到k为0,注意最终k没有减为0或者中途栈为空或者最终结果前面带0的情况 public St ...

  7. Selenium2入门（二）WebDriver

    前文Selenium2入门(一)说到Selenium是Web 应用程序测试框架,那么如果对一个简单的web应用需求:打开浏览器,登录百度首页,输入“欧洲杯”关键词,点击搜索按钮 这一系列操作,能否用S ...

  8. correlation filters in object tracking2

    http://www.cnblogs.com/hanhuili/p/4281077.html Correlation Filter in Visual Tracking系列二:Fast Visual ...

  9. GitBook制作电子书详细教程（命令行版）

    GitBook 是一款基于 Node.js 开发的开源的工具,可以通过命令行的方式创建电子书项目,再使用 MarkDown 编写电子书内容,然后生成 PDF.ePub.mobi 格式的电子书,或生成一 ...

  10. <<面向模式的软件架构2-并发和联网对象模式>>读书笔记

    服务访问和配置模式 Wrapper Facade可以将有非对象API提供的函数和数据封装到面向对象的类接口中 就是把底层API再封装一次,让外部不用关心是调用哪个平台的API,不如锁,在不同的平台上可 ...