数据表格 - DataGrid - 列表显示

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
String homePage = request.getContextPath();
%>
<script type="text/javascript">
$(function () {
$("#datagrid").datagrid({
url: "<%=homePage%>/testController/datagrid.ajax?type=list",
title: "标题",
iconCls: "icon-save",
pagination: true,
pageSize: 10,
pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
fit: true,
fitColumns: true,//列少的时候,设置为true比较合适
nowrap: false,//false - 单元格数据多的时候进行折行  true - 不管数据有多少,都在一行显示
border: false,
idField: "id",
columns: [
[
{field: "id", title: "编号", width: 100}
, {field: "name", title: "姓名", width: 100}
, {field: "password", title: "密码", width: 100}
]
]
});
})
</script>

<div class="easyui-tabs" fit="true" border="false">
<div title="用户管理">
<table id="datagrid"></table>
</div>
</div>

后端

@RequestMapping(value = "/datagrid.ajax", params = "type=list")
@ResponseBody
public Map<String, Object> datagrid1(@RequestParam Map<String, String> map) {
logger.debug("参数:" + map);
Map<String, Object> map1 = new HashMap<>();
List<Map<String, String>> list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
Map<String, String> map2 = new HashMap<>();
list.add(map2);
map2.put("id", i + "");
map2.put("name", "姓名" + i);
map2.put("password", "密码" + i);
}
map1.put("rows", list);
map1.put("total", 100);
return map1;
}

因为设置了分页，每次查询的时候，都会把page和rows参数传递给后台，后台拿着这个参数，进行分页查询后，将结果集存在rows中，把总条数存在total中。

这就实现了一个简单的分页列表了，以为还没有查询条件，还不能叫做分页查询