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分析成长之路8

    Numpy数值计算基础 Numpy:是Numerical Python的简称,它是目前Python数值计算中最为基础的工具包,Numpy是用于数值科学计算的基础模块,不但能够完成科学计算的任而且能够用 ...

  2. python爬虫入门四：BeautifulSoup库(转)

    正则表达式可以从html代码中提取我们想要的数据信息,它比较繁琐复杂,编写的时候效率不高,但我们又最好是能够学会使用正则表达式. 我在网络上发现了一篇关于写得很好的教程,如果需要使用正则表达式的话,参 ...

  3. I2C驱动框架(四)

    参考:I2C子系统之platform_driver初始化——I2C_adap_s3c_init() 在完成platform_device的添加之后,i2c子系统将进行platform_driver的注 ...

  4. LeetCode（153） Find Minimum in Rotated Sorted Array

    题目 Total Accepted: 65121 Total Submissions: 190974 Difficulty: Medium Suppose a sorted array is rota ...

  5. ！！注意！部署出现the requested resource is not available

    避免项目里重复包出现 同时tomcat的lib里避免重复包,也会出现requested resource isnot available!

  6. Java-获取Class对象的名称

    package com.tj; public class MyClass2 { public static void main(String[] args) { Class cls = java.la ...

  7. 给localhost加一个域名

    在C:\Windows\System32\drivers\etc目录下有个文件: hosts 打开后如此加上: localhost name resolution is handled within ...

  8. [UOJ#130][BZOJ4198][Noi2015]荷马史诗

    [UOJ#130][BZOJ4198][Noi2015]荷马史诗 试题描述 追逐影子的人,自己就是影子. ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静 ...

  9. haskell 乱搞笔记[原创]

        脑洞时间:为什么世界上有那么多程序语言,那是腐朽的资本主义为了增加广大人民学习成本以及编译原理太过普及造成的,建议大学取消编译原理的一切课程,并挥起奥姆休的剃刀,把所有程序语言统统踢了,除机器 ...

  10. BZOJ2707 [SDOI2012]走迷宫 【概率dp + tarjan + 高斯消元】

    题目 Morenan被困在了一个迷宫里.迷宫可以视为N个点M条边的有向图,其中Morenan处于起点S,迷宫的终点设为T.可惜的是,Morenan非常的脑小,他只会从一个点出发随机沿着一条从该点出发的 ...