EasyUI过滤器和服务器端分页jquery冲突

时间:2014-09-06 07:42:18

标签: datagrid pagination jquery-easyui jquery-pagination jquery-filter

我正在使用 EasyUI以及Liferay MVC portlet 。我在同一个数据网格上应用了服务器端分页和DataGrid过滤器。没有过滤器DataGrid分页工作正常。但是当我应用过滤器时,分页的下一页上不会显示任何数据。经过大量的努力,我发现在DataGrid过滤器插件的JS( datagrid-filter.js )中,他们已经完成了这个代码的分页:

if (opts.pagination){
    var dg = $(this);
    var pager = dg[name]('getPager');
    pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{
                pageNumber:pageNum,
                pageSize:pageSize
            });

            //dg.datagrid('loadData', state.filterSource);
            dg[name]('loadData', state.filterSource);
        },
        onBeforeRefresh:function(){
            //dg('reload');
            dg[name]('reload');
            return false;
        }
    });
    if (name == 'datagrid'){
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = data.rows.slice(start, end);
    } else {
        var topRows = [];
        var childRows = [];
        $.map(data.rows, function(row){
            row._parentId ? childRows.push(row) : topRows.push(row);
        });
        data.total = topRows.length;
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);  
        var end = start + parseInt(opts.pageSize);  
        data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));
    }
}

现在,如果我评论这一行:

dg[name]('loadData', state.filterSource);

然后分页工作正常,但过滤器没有响应任何东西。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

要解决此问题,您应该按照以下步骤操作:

  1. 确保remoteFilterfalse(默认为false);
  2. 请勿在sql查询中使用限制偏移
  3. <强>了解

    在正常分页中,当点击下一个或上一个时,EasyUi会向服务器发送带限制和偏移的参数,以限制页面的结果。使用过滤器时,如果remoteFilterfalse,则分页表会在本地发生。因此,您无需使用limit和offset来获取所有结果。

    示例

    $('#table').datagrid({
          your code here....
      }).datagrid('enableFilter');