EasyUI的DataGrid表格客户端搜索和分页

利用loadFilter，可以对载入的Json数据做很多预处理操作，然后才显示数据。
这里的预处理操作完全可以包含搜索，排序，分页等等。

客户端搜索操作的实现如下：
加入搜索框：

<input id="searchName" class="easyui-searchbox" data-options="prompt:'请输入查找关键字',searcher:doSearch" style="width:150px; margin-left:20px"/>

然后实现搜索函数：

function doSearch(value, name) {
            $('#tbl').datagrid({
                loadFilter: function (data) {
                    var newdata = {};
                    newdata.rows = [];
                    for (var i = 0; i < data.length; i++) {
                        for (var it in data[i]) {
                            if (data[i][it].toString().indexOf(value) >= 0) {
                                newdata.rows.push(data[i]);
                                break;
                            }
                        }

                    }
                    newdata.total = newdata.rows.length;
                    return newdata;
                }
            });
            $('#tbl').datagrid('reload');
        }

客户端分页函数的实现：

function pagerFilter(data) {
            var opts = $('#tbl').datagrid('options');
            var pager = $('#tbl').datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    $('#tbl').datagrid('loadData', data);
                }
            });
            var newdata = {};
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            newdata.rows = (data.slice(start, end));
            newdata.total = data.length;
            return newdata;
        }

转载于:https://my.oschina.net/superpdm/blog/267741