jQuery easyUI分页的实现

来源：互联网发布：淘宝店铺收藏和关注编辑：程序博客网时间：2024/05/21 19:42

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

阅读全文

0 0