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. securecrt8.1破解版安装与注册机的使用方法

    转自:https://blog.csdn.net/sun897827804/article/details/78532157?locationNum=9&fps=1 SecureCRT是一款用 ...

  2. “2014年CityEngine三维建模与设计精英培训班”——全国巡回举办

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXJjZ2lzX2FsbA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  3. mac 上安装 openJDK11

    紧接上篇,mac现在基本上作为开发者的主力机,当然也要安装jdk的 首先需要卸载原来的jdk8,如下: ls /Library/Java/JavaVirtualMachines/ sudo rm -r ...

  4. iOS 开发网络篇—监测网络状态

    iOS开发网络篇—监测网络状态 一.说明 在网络应用中,需要对用户设备的网络状态进行实时监控,有两个目的: (1)让用户了解自己的网络状态,防止一些误会(比如怪应用无能) (2)根据用户的网络状态进行 ...

  5. 产品设计利器--axure

    1.axute的使用方法: 2.普通线框图的使用: 3.高保真原型图: 4.交互思维. Axure RP8 是美国Axure Software Solution公司的旗舰产品,是一个快速的原型工具,主 ...

  6. [Linux]systemd和sysV

    转自:https://www.cnblogs.com/EasonJim/p/7168216.html 在Debian8中systemd和sysVinit同时存在,NTP就是在/etc/init.d/n ...

  7. netMarketing类库: 类库说明

    这个类库是作者工作中使用的私人类库,本类库适用于自动化行业的软件工程师使用.如果大家在使用中有任何疑问和建议欢迎联系作者, 或者在页面留言. (一) 引用类库 本类库的环境为.net framewor ...

  8. python 读取mysql数据至csv文件中，并发送邮件

    test 代码: #coding:utf-8 ''' Created on 2019年2月18日 @author: Administrator ''' import ConfigParser impo ...

  9. [原创]Cadence Allegro小技巧之解决Out of date shapes问题

    Allegro报错“Dynamic shapes are out of date; please update them. Check for out of date shapes in Setup ...

  10. SpirngBoot之整合Swagger2

    前言 swagger,中文"拽"的意思.它是一个功能强大的api框架,它的集成非常简单,不仅提供了在线文档的查阅, 而且还提供了在线文档的测试.另外swagger很容易构建rest ...