• EasyUI分页(前台分页和后台分页)


    整理一下以前的总结:

      分页包括前台分页和后台分页两种,针对数据量比较小的,比如说单位,角色等,可以使用前台分页,而针对日志文件这些,需要后台分页。

      先说说前台分页吧:

    function pagerFilter(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;

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

    data.rows = (data.originalRows.slice(start, end));

    return data;

    }

    $(function(){//加载数据

    $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData()); //这里获取所有的数据,然后放到datagrid中。然后修改loadFilter事件,指定数据源。

    });

      然后说后台分页吧,easyUI datagrid有一个参数queryParams,这个参数指定的是远程请求数据时指定的查询参数,所以,有两种解决方案:

      1,修改修改datagrid的load里面的参数:

     

    load

    param

    加载和显示第一页的所有行。如果指定了'param',它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询,通过调用这个方法从服务器加载新数据。

    $('#dg').datagrid('load',{

    code: '01',

    name: 'name01'

    });

      这里实际上改变的是datagrid里面的queryParams参数,这个可以在点击查询的时候来调用这个方法修改查询参数,这样在上一页,下一页和刷新中都能更新新的参数

     

      2,修改datagrid里面的onSelect方法,和页数变化方法

    $("#egcPlanDg" ).datagrid("getPager" ).pagination({

    onSelectPage:function(pageNumber, pageSize){

    searchEgcPlan(pageNumber);

    },

    onRefresh:function(pageNumber,pageSize){

    searchEgcPlan(pageNumber);

    },

    onChangePageSize:function(pageSize){

    searchEgcPlan(1);

    }

    });

  • 相关阅读:
    LCA最近公共祖先Tarjan(离线)
    51nod 1135 原根
    51nod 1134最长递增子序列
    51nod 1130 斯特林公式
    51nod 1186 Miller-Rabin素数测试
    51Nod 1257 背包问题 V3
    另类求组合数
    Gym
    msp430项目编程45
    msp430项目编程44
  • 原文地址:https://www.cnblogs.com/ningheshutong/p/8043961.html
Copyright © 2020-2023  润新知