jQuery easyUI分页的实现

最新推荐文章于 2020-02-05 13:41:59 发布

独孤战天斗神

最新推荐文章于 2020-02-05 13:41:59 发布

阅读量1.3k

点赞数 2

分类专栏：前端技术文章标签： jquery easyui 分页

本文链接：https://blog.csdn.net/ygl19920119/article/details/78192457

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery easyUI分页的实现（简单的例子）
这里写图片描述

前端—–页面核心代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />


------------------------------------------------------------


<body style="background-color: #E1ECFF">
    <table id="dg" class="easyui-datagrid"></table>
</body>


------------------------------------------------------------

$(function(){
    $('#dg').datagrid({
        url:'${ctx }/account/datagrid.do',    
        singleSelect:true,
        collapsible:true,//收起表格的内容
        width: 700,
        height: 450,
        loadMsg: '数据加载中...',
        singleSelect:true,
        fitColumns:true,
        rownumbers: true,//显示行数
        pagination:true,//显示分页
        pageSize:10,
        pageNumber:1,
        pageList:[10,20,30,40,50],
        frozenColumns: [[    
            { title: '区域名称', field: 'regionname', width: 80, sortable: false,align:'center'}    
         ]], 
           columns:[[      
               {field:'',title:'账目计算表',colspan:6,align:'center',height:30}      
            ],[
            {field:'itemid',title:'部门名称',rowspan:2,align:'center'}, 
            {field:'',title:'统计各部门的账目总和：50亿美元',colspan:5,align:'right'}
            ],[
            {field:'productid',title:'目录',width:100,align:'center'}, 
            {field:'listprice',title:'部门一',width:100,align:'center'}, 
            {field:'unitcost',title:'部门二',width:100,align:'center'}, 
            {field:'attr1',title:'部门三',width:100,align:'center'}, 
            {field:'status',title:'部门四',width:100,align:'center'}
        ]]
    }); 
    $('#dg').datagrid('getPager').pagination({
        beforePageText:'',
        afterPageText:'/{pages}',
        displayMsg:'{from}-{to} 共{total}条',
        showPageList:true,
        showRefresh:true,
        onBeforeRefresh:function(pageNumber, pageSize){ 
            $(this).pagination('loading');
            $(this).pagination('loaded'); 
        }
    });
});

后端代码，我用的是springMVC写的，不管是什么框架，只要将最重要的两个参数获取到即可，datagrid在请求的时候会将他们的当成参数进行传递后台，所以不需要在请求路径中添加参数请求。如上面的例子url:'${ctx }/account/datagrid.do,就不需要这样写成url:'${ctx }/account/datagrid.do?pageNumber=1&&pageSize=20'，直接请求；在将json数据返回就行了。

//获取页数
int pageNumber = Integer.parseInt(request.getParameter(“page”));
//获取每页显示数
int pageSize = Integer.parseInt(request.getParameter(“rows”));

核心代码：

@Controller
@RequestMapping("/account")
public class AccountController {

    @RequestMapping("/datagrid.do")
    @ResponseBody
    public DataGrid dataGrid() throws Exception{
        HttpServletRequest request = ((ServletRequestAttributes)
                RequestContextHolder.getRequestAttributes()).getRequest(); 
        //获取页数
        int pageNumber = Integer.parseInt(request.getParameter("page"));
        //获取每页显示数
        int pageSize = Integer.parseInt(request.getParameter("rows"));

        System.out.println(pageNumber+","+pageSize);
        //所有的数据集合
        List<Map<String,String>> results = new ArrayList<Map<String,String>>();
        Map<String,String> map = null;
        DataGrid dg = new DataGrid();
        //模拟的40条数据
        for (int i = 0; i < 40; i++) {
            map = new HashMap<String, String>();
            map.put("regionname", "123");
            map.put("itemid", "123");
            map.put("productid", "123");
            map.put("listprice", "123");
            map.put("unitcost", "123");
            map.put("attr1", "123");
            map.put("status", "123");

            results.add(map);
        }
        //返回到页面的数据集合
        List<Map<String,String>> result = new ArrayList<Map<String,String>>();

        for (int i = (pageNumber-1)*pageSize; i < pageNumber*pageSize&&i<results.size(); i++) {
            result.add(results.get(i));
        }
        dg.setRows(result);
        dg.setTotal(results.size());

        return dg;
    }
}

DataGrid实体类：

public class DataGrid {

    private int page = 1 ;// 当前页
    private List<Map<String,String>> rows;// 结果集
    private int pageSize = 10;//每页显示的数据的条数
    private int total;// 总记录数


    public int getPageSize() {
        return pageSize;
    }
    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public List<Map<String, String>> getRows() {
        return rows;
    }
    public void setRows(List<Map<String, String>> rows) {
        this.rows = rows;
    }
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }

}