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. 启动myeclipse出现JVM terminated. Exit code=-1

    在启动myeclipse时出现如图: 解决方法 第一种: myeclipse.ini中内存设置过大导致 修改: 256m改成128m,512m 改为 256m. 第二种:在myeclipse.ini ...

  2. 牛客网暑期ACM多校训练营（第六场） J Heritage of skywalkert（数论， eth_element）

    链接: https://www.nowcoder.com/acm/contest/144/J 题意: 给定一个函数, 求它n次结果中任意两次的lcm最大值 分析: 首先要看出这个函数并没有什么含义, ...

  3. this version of SLF4J requires log4j version 1.2.12 or later.

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFacto ...

  4. JavaScript正则表达式-或字符

    或字符是一个单竖线“|”,表示字符串只要匹配“|”连接的多个表达式中的任意一个. /ab|ac|bc/表示字符串匹配ab,或者匹配ac,或者bc

  5. PAT Basic 1049

    1049 数列的片段和 给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我们有 (0.1) (0.1, 0.2) (0.1 ...

  6. 使用systemctl命令管理服务mysql

    启动mysql systemctl start mysqld.service 停止mysql systemctl stop mysqld.service 重启mysql systemctl resta ...

  7. php在字符串中替换多个字符

    php替换多个字符串str_replace函数 echo str_replace(array("m","i"),array("n",&quo ...

  8. 循环神经网络与LSTM网络

    循环神经网络与LSTM网络 循环神经网络RNN 循环神经网络广泛地应用在序列数据上面,如自然语言,语音和其他的序列数据上.序列数据是有很强的次序关系,比如自然语言.通过深度学习关于序列数据的算法要比两 ...

  9. 100个直接可以拿来用的JavaScript实用功能代码片段(转)

    把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取2.原生JavaS ...

  10. 分析nginx日志常用的命令总结

    1. 利用grep ,wc命令统计某个请求或字符串出现的次数 比如统计GET /app/kevinContent接口在某天的调用次数,则可以使用如下命令: cat /usr/local/nginx/l ...