easyui 前端分页及前端查询
1、静态分页核心方法
// 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可 function partPurchasePagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { data = { total : data.length, rows : data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage : function(pageNum, pageSize) { opts.pageNumber = pageNum||1; // 修复查找无数据时,pageNum变为0的情况,导致又重新加载数据 opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber : pageNum, pageSize : pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); if(opts.queryParams.searchText && opts.queryParams.likeFields) {// 实现前端查询过滤 var sTxt = (opts.queryParams.searchText || '').trim(), fields = opts.queryParams.likeFields; var nRows = data.originalRows.filter(function(row){ var isMatch = false; fields.split(',').map(function(field) { if (sTxt && row[field] && row[field].indexOf(sTxt) < 0) { } else if(row[field]){ isMatch = true } }); return isMatch; }); data.total = nRows.length; data.rows = (nRows.slice(start, end)); }else { data.rows = (data.originalRows.slice(start, end));
data.total = data.originalRows.length; } return data; }
2、前端查询过滤方式
/** * 前端方式查询表格 * @param tb (object): 表格对象 * @param fields(string): 匹配的字段属性(多个以逗号分隔) * @param text(string): 检索的文本
* @eg: searchFun($('#userTable'), 'name,sex', '赵公子'); **/ function searchFun(tb,fields,text) { // 传递查询参数 $.extend(tb.datagrid('options').queryParams,{searchText: text,likeFields: fields}); // 触发表格数据前端刷新 tb.parents('.datagrid-wrap').find('.pagination-load').click(); }
至此完整的前端分页算完成<(* ̄▽ ̄*)/