1、html+js代码：

<html>

<head>

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

    <title>Index</title>

     <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/icon.css">

    <script src="~/jquery-easyui-1.5.3/jquery.min.js"></script>

    <script src="~/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>

</head>

<body>

    <div style="margin-bottom:20px">

        姓名：<input class="easyui-textbox" id="btnSearchName" style="width:150px;height:32px;">

        <input type="button" value="搜索" onclick="search()" />

    </div>

    <table id="dg" title="列表" class="easyui-datagrid" style="width:100%;">

    </table>  

   <script>

       var params = {};

       $(function () {

           loadData(params);

       });

       function loadData(params) {

           $('#dg').datagrid({

               url: '/Page/GetPageData',//数据请求地址

               method: 'post',

               pagination: true,//分页显示

               fitColumns: true,//自动适应宽度

               autoRowHeight: true,//自动行高度

               loadMsg: '正在加载...',

               nowrap: true,//设置为true 有利于提高性能

               idField: 'Number',//字段标识

               rownumbers: true,//显示行号

               singleSelect: true,//只允许选择一行

               pageNumber: 1,//初始化页面数量

               pageSize: 10,//初始化显示条数

               pageList: [10, 20, 30, 40, 60],//分页列表

               columns: [[

                   { field: 'Name', title: '姓名', width: 50 },

                   { field: 'Number', title: '工号', width: 50 },

                   {

                       field: 'action', title: '操作', width: 10, align: 'center',

                       formatter: function (value, row, index) {

                           //row.ID,数据id（主键）

                           var a = '<a href="#" onclick="edit(' + row.ID + ')">Edit</a> ';

                           var b = ' <a href="#" onclick="del(' + row.ID + ')">Delete</a>';

                           return a + b;

                       }

                   }

               ]],

               queryParams: params  //参数

           });

       }

       function search() {

           var name = $("#btnSearchName").val();

           params.name = name;

           loadData(params);

       }

       function edit(id) {

           alert(id);

       }

       function del(id) {

           alert(id);

       }

    </script>

</body>

</html>

html+js代码

点击分页，会往后台传两个默认的参数，page表示当前页索引，rows表示当前页大小（即每页多少行数据），其他参数在easyui的datagrid控件的queryParams属性中

2、后台代码，这里用的asp.net，如下：

public class PageController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult GetPageData()

        {

            int pageIndex = Convert.ToInt32(HttpContext.Request.Form["page"]);

            int pageSize = Convert.ToInt32(HttpContext.Request.Form["rows"]);

            var name = HttpContext.Request.Form["name"];

            Dictionary<string, string> dic = new Dictionary<string, string>();

            if(!string.IsNullOrEmpty(name))

            {

                dic.Add("Name",name);

            }

            int totalCount = ;

            List<UserInfo> list = GetData(dic,pageIndex, pageSize, out totalCount);

            return Json(new { total = totalCount, rows = list }, JsonRequestBehavior.AllowGet);

        }

        private List<UserInfo> GetData(Dictionary<string, string> dic,int pageIndex,int pageSize,out int totalCount)

        {

            List<UserInfo> list = new List<UserInfo>();

            UserInfo u = null;

            for (int i = ; i < ; i++)

            {

                u = new UserInfo();

                u.ID =  + (i + );

                u.Number = "ZH" + (i + ).ToString();

                u.Name = "Name" + (i + ).ToString();

                list.Add(u);

            }

            if (dic != null && dic.Count > )

            {

                list = list.Where(x => x.Name.Contains(dic["Name"])).ToList();

            }

            totalCount = list.Count;

            list = list.Take(pageSize * pageIndex).Skip(pageSize * (pageIndex - )).ToList();

            return list;

        }

        public class UserInfo

        {

            public int ID { get; set; }

            public string Number { get; set; }

            public string Name { get; set; }

        }

    }

后台代码

后台会传json到前台，json中有两个参数，total表示数据源总数量，rows表示当前页的数据。

3、先看效果图：

EasyUI实现分页、搜索、行按钮功能的更多相关文章

  1. easyui combobox开启搜索自动完成功能

    combo.json [{ "id":-1, "text":" ", "spell":"" },{ ...

  2. easyUI的datebox添加清空按钮功能

    需要修改源码: 第一步:按下图修改 第二步:按下两图修改(*zh_CN.js)

  3. 给Jquery easyui 的datagrid 每行增加操作链接(转)

    http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...

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

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

  5. 【extjs】 ext5 Ext.grid.Panel 分页,搜索

    带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...

  6. EasyUI DataGrid分页数据绑定

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

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  8. iOS 如何改变搜索取消按钮的值和颜色

    在初始化的时候加上下面两句就行了,试了无数方法,什么遍历查找子元素啊什么的都白搭,也不知道为啥还说可以,下面代码测试是有效果的: //改变搜索取消按钮的文字颜色 [[UIBarButtonItem a ...

  9. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

随机推荐

  1. 爬取 Caused by SSLError(SSLError("bad handshake: Error

    在爬虫中遇到如下报错: Traceback (most recent call last): File "C:/Users/xuchunlin/PycharmProjects/A9_25/h ...

  2. Kafka#4：存储设计 分布式设计 源码分析

    https://sites.google.com/a/mammatustech.com/mammatusmain/kafka-architecture/4-kafka-detailed-archite ...

  3. Sublime Text 文件路径补全

    最有效和好用的是AutoFileName插件,效果如下: 表格编辑 Table Editor相当好用,安装好后参考自述文件(Preferences --> Package Settings -- ...

  4. windows nginx配置https访问

    本文主要记录在windows下安装nginx 环境:win10-64位. 1.  到nginx官网上下载相应的安装包,http://nginx.org/en/download.html: 下载进行解压 ...

  5. 科普知识普及 - 桥接VS中继

    首先要说明一个很多人理解的误区,中继比桥接好用,真的是这么回事么? 答案是否定的. 我们在说桥接和中继的时候我们要先了解,桥接和中继的工作原理.还有一个问题,估计很多人都想不明白:为什么中继搜到的信号 ...

  6. 【iCore4 双核心板_FPGA】实验十八：Niosii——基于内部RAM建立第一个软核

    实验指导书及源代码下载地址: 链接:https://pan.baidu.com/s/1mjpwGJI 密码:6u8v iCore4链接:

  7. 【iCore4 双核心板_ARM】例程三十六：DAC实验——输出直流电压

    实验现象: 用电压表测量PA4引脚有2.0V直流电压输出. 核心代码: int main(void) { /* USER CODE BEGIN 1 */ /* USER CODE END 1 */ / ...

  8. vue element-ui 的奇怪组件el-switch

    https://segmentfault.com/q/1010000010008343

  9. 项目中 2个或者多个EF模型 表名称相同会导致生成的实体类 覆盖的解决方法

    场景:  2个数据库, 一个新,一个旧,  把旧的 数据库中的数据,导入到新的数据库中,  使用到了2个 EF实体模型, 新数据库 和 旧数据库中的表,有的名称是相同的 (但是结构是不同的) 旧的数据 ...

  10. Web重温系列（二）：SQLite+EF6实现本地化存储

    本来我们的产品有着复杂的层次结构,作为客户端的C# WinForm是不操作数据库的.但是最近有个需求,需要将数据本地保存.可选的方案很多,比如文本文件或者XML序列化和反序列化,或者如access.d ...