利用ligerUI实现类似数据列表过滤展示，类似JQuery datatable和某些框架的dataGrid

<!-- 导入css样式  -->
<link href="${ctx}/js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<%-- <link href="${ctx}/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> --%>
<%-- <link href="${ctx}/js/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />  --%>

<!-- 导入js文件 -->
<script src="${ctx}/js/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="${ctx}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>

<div class="content">
<div class="search">
<label style="font-size: 20px;">姓名：</label>
<input type="text" id="clientName" style="height: 25px;" />
<label style="margin-left: 50px; font-size: 20px;">年龄：</label>
<input type="text" id="clientAge" style="height: 25px;" />
<input type="button" id="filterBtn" value="过滤">
</div>
<div id="maingrid4" style="margin: 0; padding: 0"></div>
</div>

function onedit(id) {
alert(id);
};

var usrGrid;

$(function() {
//初始化表格
usrGrid = $("#maingrid4").ligerGrid({
columns : [{
display : '主键',
name : 'id',
align : 'left',
width : 120,
hide : true,
type : 'int'
}, {
display : '姓名',
name : 'name',
width : 120
}, {
display : '年龄',
name : 'age',
width : 120
}, {
display : 'accountId',
name : 'accountId',
width : 120,
hide : true
}, {
display : '账户',
name : 'accountName',
width : 120,
align : 'left'
}, {
display : '操作',
render : function(row) {
var html = "<a href='#' onclick='onedit(\""
+ row.name + "\")';>编辑</a>";
return html;
}
}],
checkbox : true,// 是否支持复选框
width : 'auto',
height : '80%',
rownumbers : true,// 显示行号
// 发送到服务器的参数
pageParmName : 'pageNo',// 页号的参数名
pagesizeParmName : 'pageSize',// 每页数据量的参数名
pageSize : 10,// 设置每页显示的数据条数

// 设置接收来自服务器返回的json参数
record : 'total',// 总页数参数名
root : 'data',// 当前查询页的数据参数名

url : top.pt.ctx + '/web/module/user/findUserPageList.action',
method : 'post',
// 自己额外需要传递到服务器的参数
parms : {
"country" : 'cn',
"customerId" : 'tgfig_658947'
}

});
//点击过滤按钮后的处理
$("#filterBtn").click(function() {
var gridManager = $("#maingrid4").ligerGetGridManager();
// setOptions可以额外添加发送到服务器的参数
var clientName = $("#clientName").val();
var clientAge = $("#clientAge").val();
gridManager.setOptions({
parms : [{
name : 'clientName',
value : clientName
}, {
name : 'clientAge',
value : clientAge
}]
});
gridManager.loadData(true);
});
});

{"data":[{"accountId":2001,"accountName":"家人账户","age":23,"college":"555","id":105,"name":"555"},{"accountId":2002,"accountName":"奖学金卡","age":45,"college":"234","id":1001,"name":"Jack"},{"age":21,"college":"369","id":1002,"name":"Tom"},{"age":17,"college":"589","id":1003,"name":"Jane"},{"age":19,"college":"111","id":1004,"name":"111"},{"age":20,"college":"66","id":1006,"name":"666"},{"age":21,"college":"777","id":1007,"name":"777"},{"age":18,"college":"888","id":1008,"name":"888"},{"age":17,"college":"99","id":1009,"name":"999"},{"age":22,"college":"1011","id":1011,"name":"1011"}],"total":12}