table表格其实还是很好实现的，先看效果吧
前台界面的代码如下：
<body>
<input type="hidden" id="sd" value="${pageContext.request.contextPath}">
<form id="" class="layui-form" action="">
<div align="right">
<button class="layui-btn" data-type="reload">新建</button>
<button class="layui-btn" data-type="alldel">查询</button>
</div>
<br>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">客户名称</label>
<div class="layui-input-inline">
<input id="chc_cust_name" name="chc_cust_name" type="text" style="width: 190px" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">概要</label>
<div class="layui-input-inline">
<input id="chc_title" name="chc_title" type="text" style="width: 190px" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">联系人</label>
<input id="chc_linkman" name="chc_linkman" type="text" style="width: 190px" autocomplete="off" class="layui-input">
</div>
</div>
</form>
<table class="layui-table" id="demoTable" lay-filter="demoTable" lay-data="{id: 'idTest'}">
</table>
<script type="text/html" id="barDemo">
<div id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="apo"><i class="layui-icon layui-icon-face-smile"></i>指派</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-delete"></i>删除</a>
</div>
</script>
</body>
后台的js如下：
layui.use(['table', 'form'], function() {
var table = layui.table;
layer = layui.layer;
form = layui.form;
table.render({
elem : '#demoTable',
url : sd+'/sy/salesAction_findSalChange.action',
// toolbar: '#barDemo',
even : true,
page : true, //是否显示分页
limits : [ 5, 10 ], //控制多少行一页（默认五条一页）
limit : 5 ,//每页默认显示的数量,
cols : [[
{ field: 'chc_id', title: '编号',width:80, sort: true},
{ field: 'chc_cust_name',title: '客户名称',width:120,sort: true},
{ field: 'chc_title',title: '概要',width:185},
{ field: 'chc_linkman',title: '联系人',width:90, sort: true},
{ field: 'chc_tel',title: '联系人电话',width:150, sort: true},
{ field: 'chc_create_date',title: '创建时间',width:180,sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:220},
]],//field是实体类属性
id:'tableReload',
});
});
struts2 的xml
<!-- salesAction -->
<action name="salesAction_*" class="com.zking.web.SalesAction" method="{1}" >
<result name="changeManage">/jsp/sales/changeManage.jsp</result>
</action>