首先声明 关于分页功能 比较难的是前端功能实现，后端 功能相对简单，如果没有搞清楚重点的同学要自行多理解
先上后端的代码,controller 层的下面两个方法主要是进行获取总的数据条目数，和根据页面获取列表的两个函数。其中PageModel 是一个分页实体类，只有三个属性 以及对应的get 和set 方法。
private int page
private int rows
private int startIndex
@RequestMapping(value = "/getTotal")
@ResponseBody
public int getTotalCount() throws Exception {
List<CustomerServiceEntity> list = customerService.getList(null);
return list.size();
}
@RequestMapping(value = "/list")
@ResponseBody
public List<CustomerServiceEntity> getListForService(PageModel page,HttpServletRequest request) throws Exception {
// 调用服务层的list方法
// 传入page 对象帮助进行分页
// 处理一下分页对象
String strName= request.getParameter("page");
String rows= request.getParameter("rows");
System.out.println(strName);
System.out.println(rows);
if (page.getPage() == 0) {
page = null;
} else {
int startindex = (page.getPage() - 1) * page.getRows();
page.setStartIndex(startindex);
}
List<CustomerServiceEntity> list = customerService.getList(page);
return list;
}SQL语句如以下所示,用的是mybatis 框架,数据库是mysql
<select id="listAll" parameterType="PageModel" resultType="CustomerServiceEntity">
select * from
<include refid="table"></include>
<if test="startIndex!=null and rows!=null">
limit #{startIndex} , #{rows}
</if>
</select>然后重点来了,前端如何实现，重点是table 和pagination 的几处js代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>服务分配</title>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css" />
<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.edatagrid.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script>
function dlgForServiceDispatch(){
var selectedItems=$("#table_serviceManager").datagrid("getSelections");
if(selectedItems.length!=1)
{
$.messager.alert("系统提示!","请仅选择一条需要分配的客户数据!");
return;
}
else
{
var row=selectedItems[0];
$("#div_dlg").dialog("open").dialog("setTitle","分配客户服务");
$("#frm").form("load",row);
$("#assignTime").val();
}
}
function closeDlg(){
$("#div_dlg").dialog("close");
}
function saveDlg()
{
$("#frm").form("submit");
}
function dlgDel(){
var item=$("#table_serviceManager").datagrid("getSelections");
if(item.length!=1)
{
$.messager.alert("系统提示!","请仅选择一条要删除的数据!");
}
else
{
var id=item[0].id;
$.messager.confirm("系统提示","您确认要删除这条数据吗?",function(r){
if(r){
$.post("${pageContext.request.contextPath}/service/delete",{id:id},function(result){
console.log(result);
if(result=="DONE")
{
$.messager.alert("系统提示!","已经成功删除!");
$("#table_serviceManager").datagrid("reload");
}
else
{
$.messager.alert("删除失败!");
}
});
}
});
}
}
//加载datagrid的一些信息
$(document).ready(function(){
var total;
$.post("${pageContext.request.contextPath}/service/getTotal",{},function(res){
console.log(res);
total=res;
$("#pageSelect").pagination({
total:res,
onSelectPage:function(pageNumber,pageSize){
$("#table_serviceManager").edatagrid({
url:"${pageContext.request.contextPath}/service/list?page="+pageNumber+"&rows="+pageSize
});
}
});
console.log($("#pageSelect").pagination.page);
console.log($("#pageSelect").pagination.rows);
$("#table_serviceManager").edatagrid({
url:"${pageContext.request.contextPath}/service/list?page=1&rows=10"
});
});
});
</script>
</head>
<body style="overflow: hidden;">
<div class="easyui-panel" style="width:1100px;height: 800px;overflow: hidden;">
<table border="" id="table_serviceManager" fitColumns="true"
title="客户信息管理" class="easyui-datagrid" rownumbers="true"
data-options="singleSelect:true" toolbar="#tb">
<thead data-options = "frozen:true">
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th field="id" width="50" align="center">编号</th>
<th field="customer" width="150" align="center">客户</th>
<th field="overview" width="300" align="center">概要</th>
<th field="serviceType" width="150" align="center">服务类型</th>
<th field="createPeople" width="150" align="center">创建人</th>
<th field="createTime" width="150" align="center">创建日期</th>
</tr>
</thead>
</table>
<div class="easyui-panel">
<div id="pageSelect" class="easyui-pagination"></div>
</div>
<div id="tb">
<div>
<a href="javascript:dlgForServiceDispatch()" class="easyui-linkbutton" iconCls="icon-fwfp" plain="true">分配</a>
<a href="javascript:dlgDel()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
</div>
</div>
<div id="div_dlg" class="easyui-dialog"
style="width: 750px; height: 450px;padding: 10px 20px;" closed="true">
<form action="${pageContext.request.contextPath}/service/saveDispatch" method="post" id="frm">
<table cellspacing="8px">
<tr style="display:none">
<td>
<input name="id" type="text"></input>
</td>
</tr>
<tr>
<td>服务类型</td>
<td>
<input type="text" name="serviceType" readonly="readonly" />
</td>
<td> </td>
<td>客户</td>
<td>
<input type="text" name="customer" readonly="readonly" />
</td>
</tr>
<tr>
<td valign="top">概要</td>
<td colspan="4">
<input type="text" name="overview" class="easyui-validatebox" required="true" />
</td>
</tr>
<tr>
<td>服务请求</td>
<td colspan="4">
<textarea name="serviceRequest" rows="5" cols="40" ></textarea>
</td>
</tr>
<tr>
<td>创建人</td>
<td>
<input type="text" name="assigner" readonly="readonly" />
</td>
<td> </td>
<td>创建时间</td>
<td>
<input type="text" name="createTime" id="createTime" readonly="readonly" />
</td>
</tr>
<tr>
<td>分配给</td>
<td>
<input type="text" class="easyui-combobox, easyui-validatebox" name="serviceProcePeople" value="" />
<font color="red">*</font>
</td>
<td></td>
<td>分配时间</td>
<td>
<input type="text" class="easyui-datetimebox" name="assignTime" id="assignTime" />
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2">
<a href="javascript:saveDlg()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<a href="javascript:closeDlg()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
