EasyUI Pagination怎么实现分页功能getPager

本篇内容介绍了“EasyUI Pagination怎么实现分页功能getPager”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

EasyUI Pagination实现分页功能getPager

1.第一步通过标记创建分页（pagination）data-options里面的内容可参考官网的API根据需要添加。

<table id="recordDatagrid" class="easyui-datagrid" 
    data-options="
    fitColumns:true,
    autoRowHeight:false,
    pagination:true,
    singleSelect:true,
    nowrap:false,
    showRefresh:false,
    striped:true,
    rownumbers:true">
    <thead>
        <tr>
        <th data-options="field:'number'"  sortable="true" >AI智能</th>
        </tr>
    </thead>
</table>

2.第二步使用 javascript 创建分页（pagination）。

$(function($) {getPager_DataGrid('recordDatagrid');//获取table分页的id
initDataTables(1,10,"y");});//页面进入就执行//回调函数

3.第三步使用 处理ajax请求回来的数据操作如下。

function initDataTables(pageNumber, pageSize,isNew) {$.ajax({
    type: "get",
    dataType: "json",
    data:"&pageNumber="+ pageNumber
    +"&pageSize="+ pageSize,//传页数
    url: '/storeManageController/list',//填写地址
beforeSend:function(){//数据传输中显示框
    $.messager.progress({
        title:'请稍等',
        interval:50,
        text:'数据加载中...'
    });
},
success: function(json){
    //console.log("json"+JSON.stringify(json));
    $('#recordDatagrid').datagrid('loadData', json);             
    if(isNew == "y"){//获取第一页，页面刷新时显示第一页内容
        var p = $('#recordDatagrid').datagrid('getPager');    
        $(p).pagination({
            pageNumber:1
    });
}
    $.messager.progress('close');//显示框关闭
    },
error: function(XMLHttpRequest, textStatus, errorThrown){
     $.messager.progress('close');
}
});});

4.第四步使用，这里从ajax传回的数据处理完之后，页面显示的分页此时是英文显示，我们还需要做一步处理，easyui已经帮我们做好了封装的函数，这一步直接粘贴复制就可以了，对应好table的id的名字。

function getPager_DataGrid(datagridID){//这里我们要对照第二步的函数名一致
    var p = $('#'+datagridID+'').datagrid('getPager');
    $(p).pagination({
        pageSize:10,
        pageList:[10,30,50],
        beforePageText:'第',
        afterPageText:'页     共{pages}页',
        displayMsg:'当前显示{from} - {to}条记录    共{total}条记录',
        onSelectPage:function(pageNumber, pageSize){
            initDataTables(pageNumber, pageSize, "n");//我们回调函数，通过ajax请求，返回参数
        }
    });
}

这就是全部的代码，希望你们能够看懂

easyui控件，如何使用分页功能

//定义两个全局变量,用于存放最新的pageSize和pageNumber，在datagrid加载完毕函数中，捕捉列表页各种动作并记录当前页和页面条数

//根据新的页码和页面条数，刷新数据

var dgPageNumber=1;//初始页码
var dgPageSize=10;//初始页记录数
$("#dg").datagrid({
pagination:true,
pageNumber:dgPageNumber,
pageSize:dgPageSize,
onLoadSuccess:function(data){
$("#dg").datagrid('getPager').pagination({
onRefresh:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//页码刷新后，数据要刷新，重新根据新页码查询数据
//loadData()
},
onChangePageSize:function(pageSize){
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:dgPageNumber,
pageSize:pageSize
});
//页面承载条数改变，数据也要刷新
//loadData()
},
onSelectPage:function(pageNumber,pageSize){
dgPageNumber=pageNumber;
dgPageSize=pageSize;
$("#dg").datagrid({
pageNumber:pageNumber,
pageSize:pageSize
});
//页码改变，数据也要刷新
//loadData()
}
})
}
})

“EasyUI Pagination怎么实现分页功能getPager”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！