easyui datagrid的排序默认是server端排序。能够用sorter实现client排序[2]。client分页可用filter实现[3]。client搜索相同能够用filter实现。

不多说直接上代码：

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta name="keywords" content="jquery,ui,easy,easyui,web">

	<meta name="description" content="easyui help you build your web page easily!">

	<title>jQuery EasyUI Demo</title>

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<script type="text/javascript">

		    $(function(){

            $('#tt').datagrid({loadFilter:pagerFilter}).datagrid();

        });

	function doSearch(){

    $('#tt').datagrid({searchValue: $('#search_name').val()});

  }

       function mysort(a,b){

				   return (a > b ? 1 : -1);

       }

        function pagerFilter(data){

            if (typeof data.length == 'number' && typeof data.splice == 'function'){

                data = {

                    total: data.length,

                    rows: data,

                    originalTotal: data.length

                }

            }

            var dg = $(this);

            var opts = dg.datagrid('options');

            if (!data.originalRows){

                data.originalRows = (data.rows);

            }

            if (opts.searchValue) {

            	data.currOriginalRows = [];

            	for (var k in data.originalRows) {

            		row = data.originalRows[k];

            		if(row.name.match(opts.searchValue)) {

            			data.currOriginalRows.push(row);

            		}

            	}

            	data.total = data.currOriginalRows.length;

            	data.originalTotal;

            }

            else {

            	data.currOriginalRows = data.originalRows;

            	data.total = data.originalTotal;

            }

            var pager = dg.datagrid('getPager');

            pager.pagination({

                onSelectPage:function(pageNum, pageSize){

                    opts.pageNumber = pageNum;

                    opts.pageSize = pageSize;

                    pager.pagination('refresh',{

                        pageNumber:pageNum,

                        pageSize:pageSize

                    });

                    dg.datagrid('loadData',data);

                }

            });

            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);

            var end = start + parseInt(opts.pageSize);

            data.rows = (data.currOriginalRows.slice(start, end));

            return data;

        }

  </script>

</head>

<body>

	<h1>DataGrid</h1>

	<table id="tt" title="Column Group" class="easyui-datagrid" style="width:1060px;height:390px"

			url="data/items7.json"

			singleSelect="true" iconCls="icon-save" rownumbers="true" pagination="true"

			toolbar="#tb"

			remoteSort="false">

		<thead>

			<tr>

				<th field="name" width="180" align="right" sortable="true" sorter="mysort">name</th>

				<th field="url" width="680" align="right">url</th>

			</tr>

		</thead>

	</table>

	<div id="tb" style="padding:3px">

    <span>name</span>

    <input id="search_name" style="line-height:26px;border:1px solid #ccc">

    <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>

  </div>

</body>

</html>

參考：

[1] http://www.jeasyui.com/tutorial/datagrid/datagrid24.php

[2] http://www.jeasyui.com/tutorial/datagrid/datagrid14.php

[3] http://blog.hiter.org/2013/07/realization-of-easyui-datagrid-paging-at-the-front-desk.html

easyui datagrid client搜索、分页、排序的更多相关文章

  1. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  2. easyUI datagrid 前端真分页

    前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...

  3. 【转】 jquery easyui datagrid使用，分页、排序、查询

    $('#dg').datagrid({ url: "xxx.ashx",                    pagination: true,                p ...

  4. EasyUI - DataGrid 组建 - [ 搜索功能 ]

    效果: html代码: 使用css加载的方式,所以要在写html代码,也可以使用js操作. <div> <!--使用JS加载方式--> <table id="t ...

  5. EasyUI DataGrid 使用（分页，url数据获取，data转json）

    EasyUI算是比较有名的,搜一下网上的资料也比较多,具体的参数,下载地址我就不写了 平常也不怎么写文章,大部分都是代码,有不能运行的可以直接评论回复 有可能遇到的问题: json数据格式,这个要仔细 ...

  6. easyUI datagrid 前端假分页

    datagrid有两种分页方式,真分页和假分页. 所谓真分页,就是真的每次只获取一张分页的数据. 所谓假分页,就是将所有数据全部获取下来,然后利用其分页控件进行分页. 下面具体说说假分页: 1.dat ...

  7. jQuery easyui datagrid pagenation 的分页数据格式

    {"total":28,"rows":[    {"productid":"FI-SW-01","unitco ...

  8. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  9. easyui datagrid remoteSort的实现 Controllers编写动态的Lambda表达式 IQueryable OrderBy扩展

    EF 结合easy-ui datagrid 实现页面端排序 EF动态编写排序Lambda表达式 1.前端页面 var mainListHeight = $(window).height() - 20; ...

随机推荐

  1. Python从文件中读取数据

    一.读取整个文件内容 在读取文件之前,我们先创建一个文本文件resource.txt作为源文件. resource.txt my name is joker, I am 18 years old, H ...

  2. spring配置datasource三种方式 数据库连接池

    尊重原创(原文链接):http://blog.csdn.net/kunkun378263/article/details/8506355 1.使用org.springframework.jdbc.da ...

  3. 对 Servlet 的改进

    通过上一篇博客:Servlet 的详解 http://www.cnblogs.com/ysocean/p/6912191.html,我们大致知道了 Servlet 的基本用法.但是稍微分析一下 Ser ...

  4. find_element——By 元素定位

    • find_element(By.ID,”loginName”)• find_element(By.NAME,”SubjectName”)• find_element(By.CLASS_NAME,” ...

  5. CSAPP学习笔记—虚拟内存

    CSAPP学习笔记—虚拟内存 符号说明 虚拟内存地址寻址 图9-12展示了MMU如何利用页表来实现这种映射.CPU中的一个控制寄存器,页表基址寄存器(Page Table Base Register, ...

  6. Kubernetes对象

    Kubernetes对象 在之前的文章已经讲到了很多Kubernets对象,包括pod,service,deployment等等.Kubernets对象是一种持久化,表示集群状态的实体.它是一种声明式 ...

  7. POJ 2396 Budget ——有上下界的网络流

    给定矩阵的每行每列的和,和一些大于小于等于的限制.然后需要求出一组可行解. 上下界网络流. 大概的思想就是计算出每一个点他需要强行流入或者流出的量,然后建出超级源点和汇点,然后删除下界,就可以判断是否 ...

  8. HDU 1565 方格取数(1) ——插头DP

    [题目分析] 其实直接状压就可以了. 但是有点闲,又写了一个可读性极差,智商低下,很(gou)好(pi)的代码 [代码] #include <cstdio> #include <cs ...

  9. 【CCF】路径压缩 区间dp

    [题意] 改编哈夫曼树,限制从左到右字母的编码按字典序递增 [思路] 因为是二进制编码,所以是二叉树: 因为是前缀码,所以每个字母都是叶子结点,不可能是内结点: 因为要按字典序递增,所以只能是相邻的结 ...

  10. jmeter监控linux cpu 内存 网络 IO

    下载地址:http://jmeter-plugins.org/downloads/all/ PerfMon: 用来监控Server的CPU.I/O.Memory等情况 ServerAgent-2.2. ...