zoukankan      html  css  js  c++  java
  • easyui分页控件的应用

    1.首先应用easyui的js和css文件
    <link rel="stylesheet" type="text/css" href="../../util/jquery-easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../util/jquery-easyui/themes/icon.css" />
    <script type="text/javascript" src="../../util/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../util/easyui-lang-zh_CN.js"></script>//注意放在引用的最后;汉化

    2.定义分页处理方法(公共方法)
    function _pagerFilter(data){
    if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
    data = {
    total: data.length,
    rows: data
    }
    }
    var dg = $(this);
    var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
    showPageList:false,
    displayMsg:'每页显示10条 共{total}条记录',
    onSelectPage:function(pageNum, pageSize){
    opts.pageNumber = pageNum;
    opts.pageSize = pageSize;
    pager.pagination('refresh',{
    pageNumber:pageNum,
    pageSize:pageSize
    });
    dg.datagrid('loadData',data);
    $('div.datagrid-header-check input[type=checkbox]').attr("checked",false);
    }
    });
    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;
    }

    3.表格设置使用分页
    $('#dg').datagrid({
    '100%',
    height: h,
    rownumbers: true,
    singleSelect: true,
    fit:true,
    fitColumns:true,
    pagination: true,//使用分页
    //......

    4.加载数据时需要同时加载分页方法
    $('#dg').datagrid({loadFilter:_pagerFilter}).datagrid('loadData', {
    total: data.length,
    rows: data
    });

  • 相关阅读:
    h5之js生成二维码
    h5手势密码开发(使用jq)
    html可用于跨域的三个标签
    原生js实现ajax
    js中parentNode,parentElement,childNodes,children
    js字符串操作之substr与substring
    pyhton之os.path
    [bzoj1510][POI2006]Kra-The Disks_暴力
    [bzoj4994][Usaco2017 Feb]Why Did the Cow Cross the Road III_树状数组
    [bzoj2506]calc_分块处理
  • 原文地址:https://www.cnblogs.com/onlyperfect/p/8313279.html
Copyright © 2011-2022 走看看