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. 树形 dp

    // ACM训练联盟周赛     C. Teemo's tree problem There is an apple tree in Teemo's yard. It contains n nodes ...

  2. 关于MongoDB分布式高可用集群实现

    一.环境准备 1.本例使用3台Linux主机,IP地址如下: 点击(此处)折叠或打开 Server B Server C 2.根据需要,开启相应主机防火墙的相关端口.本次需要用到3台主机,所以开启这3 ...

  3. asp.net下js调用session

    大致方法为:js调用webservise,然后通过webservise将session值返回给js完成调用 其实最主要的一点就是在webmethod中允许session:[WebMethod(Enab ...

  4. AbstractFactory(抽象工厂模式)

    AbstractFactory(抽象工厂模式) 有些情况下我们需要根据不同的选择逻辑提供不同的构造工厂,而对于多个工厂而言需要一个统一的抽象 <?php class Config { publi ...

  5. linux下ln命令

    转自:http://www.cnblogs.com/peida/archive/2012/12/11/2812294.html ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位 ...

  6. 第一阶段Sprint 对其他团队评价

    咱们的team 针对对“小学生网页四则运算”这个产品的评审,本人提出建议:1.第一阶段的产品Sprint不够好,无任务看板.无燃尽图.希望完善该产品的的Sprint,第二阶段的Sprint要认真写好. ...

  7. 【bzoj3689】异或之 可持久化Trie树+堆

    题目描述 给定n个非负整数A[1], A[2], ……, A[n].对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A[i] xor A[j],这样共有n*(n ...

  8. [BZOJ2523][Ctsc2001]聪明的学生

    [BZOJ2523][Ctsc2001]聪明的学生 试题描述 一位教授逻辑学的教授有三名非常善于推理且精于心算的学生A,B和C.有一天,教授给他们三人出了一道题:教授在每个人脑门上贴了一张纸条并告诉他 ...

  9. BZOJ 1113 Wall ——计算几何

    凸包第一题. 自己认为自己写的是Andrew 其实就是xjb写出来居然过掉了测试. 刚开始把pi定义成了int,调了半天 #include <map> #include <cmath ...

  10. spring之scope作用域

    spring中,bean的作用域有五种类型:默认是单例模式,         singleton         prototype         request         session   ...