Easy ui Pagination 分页

easy ui 分页

做了那么多分页,记录一下easy ui分页过程

easy ui分页其实很简单,在他的包里面很多都已经给你做好了,分页有几种模式,一般我们都用JS来操作,话不多说,直接上货

页面上引用easy ui的 JS和CSS这个就不说了,

首先,你需要在html端创建一个分页样式,如下,具体位置在table表格后面,代码段为

<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

这个步骤完成过后,就可以进行JS端的代码编写了

在你的表格初始化后面,增加分页控件初始化,当用户点击页面分页控件时,就会触发onSelectPage这个方法,会得到页码pageNumber,每页条数pageSize

// 加载表格
$("#table1").datagrid({
    //title: "数据列表",
    iconCls: "icon-left02",
    width: '100%',
    rownumbers: true,
    nowrap: false,
    striped: true,
    //height: vendor_Info_Height,
    checkOnSelect: false,
    singleSelect: true,
    toolbar: '#',
    columns: [[
            { field: 'xxx', title: 'xxx', width: 290, align: 'left' },
            { field: 'xxx', title: 'xxx', width: 290, align: 'left' }
    ]]
});


//设置分页控件 
$('#pp').pagination({
    pageSize:10,
    onSelectPage: function (pageNumber, pageSize) {
        $(this).pagination('loading'); //把分页变成正在加载状态。
        cidinfo.cidelect(pageNumber, pageSize);//调用查询方法,传入页面信息
        $(this).pagination('loaded');//加载完成
    }
});

这里有几个常用属性

pageList: [10,20,50,100] //用户能改变页面尺寸,也就是每页条数

pageSize:页面尺寸。（注：每页显示的最大记录数）

total: 200,//总条数

layout:['first','links','last'] //按钮设置

1、list：页面尺寸列表。
2、sep：页面按钮分割。
3、first：第一个按钮。
4、prev：前一个按钮。
5、next：后一个按钮。
6、last：最后一个按钮。
7、efresh：刷新按钮。
8、manual：允许输入域页码的手动页码输入框。
9、links：页码链接。

其他的请参考Easy ui文档

这些工作做完以后,就可以进行JS  AJAX请求数据然后显示在table上就OK啦,这里记得设置分页的总数量

        $.ajax({
            type: 'post',
            url: 'url',
            data: select,
            success: function (data) {
                var dataObj = data;
                var content = "";
                $.each(dataObj, function (index, item) {
                    if (item.isSuccess == true) {
                        content = JSON.stringify(item.content);

                        $("#table").datagrid({
                            data: $.parseJSON(content)
                        });
                        //设置分页控件 
                        $('#pp').pagination({
                            total: item.content[0].totalLine,//总条数
                        });
                    } else {
                        $.messager.alert('提示', item.message);
                    }
                });
            }
        });

公司不让贴数据,就这样看看吧

有不懂的欢迎留言