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--进程内容补充

    一. 进程的其他方法 进程id, 进程名字, 查看进程是否活着(is_alive()), terminate()发送结束进程的信号 import time import os from multipr ...

  2. JavaScript正则表达式-字符类

    字符列表 在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的.每次匹配只能匹配列表中的一个字符. str = "bird,head,fed,meadow ...

  3. Python3中super()的参数传递

    1. super([type[, object-or-type]]) super() 在使用时至少传递一个参数,且这个参数必须是一个类. 通过super()获取到的是一个代理对象,通过这个对象去查找父 ...

  4. myeclipse 改变模版

    一.修改Servlet的默认模板代码 使用MyEclipse创建Servlet时,根据默认的Servlet模板生成的Servlet代码如下: 1 package gacl.servlet.study; ...

  5. windows liver writer下载地址

    wlsetup-all.exe 链接:http://pan.baidu.com/s/1bo9pm7X 密码:zchb wlsetup-all简体版.exe 链接:http://pan.baidu.co ...

  6. 大数据学习——sql练习

    1. 现有如下的建表语句和数据: 建表语句 create table student(Sno int,Sname string,Sex string,Sage int,Sdept string)row ...

  7. springboot集成redis操作

    使用HashOperations操作redis----https://www.cnblogs.com/shiguotao-com/p/10560458.html 使用HashOperations操作r ...

  8. wordpress需要FTP用户名密码的问题

    wordpress安装删除插件需要FTP用户名密码的问题 方法一: 服务器命令操作: 1.在wordpress目录下面wp-config.php末尾加入下面代码:  if(is_admin()) {  ...

  9. ubuntu14.04 software-center can not open

    sudo apt-get update sudo apt-get dist-upgrade sudo apt-get install --reinstall software-center

  10. 使用ANT将Android打包成Jar包

    本文主要实现使用ANT,将Android项目打包成jar,为方便其他项目使用. ANT可以去官网下载(http://ant.apache.org/) 先介绍打包的步骤,打包脚本下方贴出 步骤: 1,将 ...