zoukankan      html  css  js  c++  java
  • 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(); }

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

  • 相关阅读:
    scrapy爬虫框架
    MongoDB分组查询,聚合查询,以及复杂查询
    mac重启iterm后不会自动加载.bash_profile
    Linux 之 2>&1
    linux下利用nohup后台运行jar文件包程序
    【intellij idea】汇总
    JAVA虚拟机体系结构
    JDK > JRE > JVM
    依赖注入(IOC) 详解
    mysql 忘记密码 登陆+修改密码
  • 原文地址:https://www.cnblogs.com/xtreme/p/10986525.html
Copyright © 2011-2022 走看看