一、 目标
- 可使用搜索框;
- 自定义表格的语言风格;
- 增加首页、末页;
- 隐藏表格中不需要的信息;
- 隐藏指定列;
二、 效果预览
三、 代码说明
3.1 表格装载
<script>
$(document).ready(function() {
$('#example').DataTable({
columns : [ {
"sWidth" : "100px",
bSearchable : false,
bSortable : false,
data : 'id'
}, {
"sWidth" : "100px",
bSearchable : true,
bSortable : false,
data : 'name'
}, {
"sWidth" : "100px",
bSearchable : false,
bSortable : false,
visible: false,
data : 'passwd'
}, {
"sWidth" : "100px",
bSearchable : false,
bSortable : false,
data : 'age'
} ],
"processing" : true,
"serverSide" : true,
"ajax" : "../getUserContentByMyself",
//控制表格显示哪些部分
"dom":'ftp',
//表格语言设置
"language": {
"url": "../json/table.json",
},
//设置分页脚标
"pagingType": "full_numbers"
});
});
</script>
3.2 后台获取搜索参数
public Object getUserContent(HttpServletRequest request) {
int start = Integer.parseInt(request.getParameter("start"));
int len = Integer.parseInt(request.getParameter("length"));
String searchVal = request.getParameter("search[value]");
Map<String, String> params = new HashMap<String, String>();
params.put("searchVal", searchVal);
Map<String, Object> result = getUserPaginationService.getDetails(params, start, len);
return JSONArray.toJSON(result);
}
3.3 Mybatis使用搜索参数
<!-- 获取分页内容的记录总数 -->
<select id="getUserSize" resultType="java.lang.Integer" parameterType="java.util.Map">
select count(1) from user where name like '%${searchVal}%'
</select>
<!-- 获取分页内容的记录内容 -->
<select id="getUserContent" resultMap="mUser" parameterType="java.util.Map">
select * from user where name like '%${searchVal}%'
</select>
四、 总计
datatable空间会把所有需要的参数,传给后台,后台需要做的是利用这些参数,去获取数据,然后返回数据及相应的参数给前台,前台才会自动装载好表格。