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. Python之关于量化投资实现代码--根据策略提出的代码--还未完善

    # 根据缺口的模式选股买股票 ''' -------------------------------------------- 1.总体回测前要做的事情 initialize(context) 1.1 ...

  2. aspx页面，取得Excel某列不同类型的数据为空

    红色部分需要加上, string connectionString = string.Format("Provider=Microsoft.Jet.OLEDB.4.0;Data Source ...

  3. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  4. Spring-boot之 rabbitmq

    今天学习了下spring-boot接入rabbitmq. windows下的安装:https://www.cnblogs.com/ericli-ericli/p/5902270.html 使用博客:h ...

  5. gsoap入门:C/C++代码生成及编译--包含soapcpp2 -qname添加命名空间后报错的解决方法--可用

    gsoap是什么 先来一段百度百科,说说gsoap是什么: gSOAP一种跨平台的开源的C/C++软件开发工具包.生成C/C++的RPC代码,XML数据绑定,对SOAP Web服务和其他应用形成高效的 ...

  6. ViZDoom深度预测(Depth Prediction)

    代码:github.com/huangshiyu13/ViZDoomDepth 图片被分成3x6的区域,利用模型预测每个区域的平均深度,效果如下图:

  7. Spring Security的几个重要词

    1.SecurityContextHolder:是安全上下文容器,可以在此得知操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保存在SecurityContextHolder中. O ...

  8. rabbitmq 生产者 消费者（多个线程消费同一个队列里面的任务。） 一个通用rabbitmq消费确认，快速并发运行的框架。

    rabbitmq作为消息队列可以有消息消费确认机制,之前写个基于redis的通用生产者 消费者 并发框架,redis的list结构可以简单充当消息队列,但不具备消费确认机制,随意关停程序,会丢失一部分 ...

  9. Android实现夜间模式

    如今非常多App都有夜间模式,特别是阅读类的App.夜间模式如今已经是阅读类App的标配了,其实,日间模式与夜间模式就是给App定义并应用两套不同颜色的主题,用户能够自己主动或者手动的开启,今天用An ...

  10. 通过poi的XSSF实现生成excel文件

    maven导入依赖jar包: <dependency> <groupId>org.apache.poi</groupId> <artifactId>po ...