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. CZT变换（chirp z-transform）

    作者:桂. 时间:2018-05-20  12:04:24 链接:http://www.cnblogs.com/xingshansi/p/9063131.html 前言 相比DFT,CZT是完成频谱细 ...

  2. Netty学习(八)-Netty的心跳机制

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a953713428/article/details/69378412我们知道在TCP长连接或者Web ...

  3. bootstrap 前端模板

    https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/

  4. Python分页组件

    分页组件的实现: class Pagination(object): """ 自定义分页 """ def __init__(self,cur ...

  5. [druid]大数据挑战——如何使用Druid实现数据聚合

    -- 知道你为什么惧组件很多的一些开源软件? 因为缺乏阅读能力. 最近我接手了druid+kafka+elk一套等日志系统. 但是我对druid很陌生, 周旋了几天, 官网文档快速开始照着做了下. 看 ...

  6. mac上配置使用virtualenv

    1.安装virtualenv $ sudo pip install virtualenv 2.安装virtualenvwrapper $ sudo easy_install virtualenvwra ...

  7. jquery $('#form1').serialize()序列化提交表单

    1.$("#form1").serialize() 把form表单的值序列化成一个字符串,如username=admin&password=admin123 <for ...

  8. Diffuse贴图+Lightmap+Ambient

    shader里面光照计算毕竟还是比较复杂的,于是想到下面的性能相对好一些的方案. 美术提供一张Diffuse贴图,一张lightmap贴图,然后在应用一个自定义的全局的环境光效果,来模拟静态的光照. ...

  9. FasterRCNN 提升分类精度(转)

    近年来,随着深度学习的崛起,计算机视觉得到飞速发展.目标检测作为计算机视觉的基础算法,也搭上了深度学习的快车.基于Proposal的检测框架,从R-CNN到Faster R-CNN,算法性能越来越高, ...

  10. AWT是Java最早出现的图形界面，但很快就被Swing所取代。

    Module  11 Swing AWT是Java最早出现的图形界面,但很快就被Swing所取代. Swing才是一种真正的图形开发. AWT在不同平台所出现的界面可能有所不同:因为每个OS都有自己的 ...