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();
    }

 

至此完整的前端分頁算完成<(*￣▽￣*)/