背景介绍
是不是习惯了EasyUI封装的DataGrid表格,传入一个json串,就可以自动加载数据,显示分页,还能实现一些特殊需求,如行内编辑,操作列等。而使用bootstrap表格的话,则需要完全自己手写table和分页控件,并且将两者组合到一起,才是个完整的表格,代码量大不说,如果需要实现一些特殊的需求,行内编辑等那就更加繁琐了。
Datatables
所以我寻找到了一款bootstrap风格的第三方表格插件:datatables。
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以给任何HTML表格添加高级的交互功能。提供分页,即时搜索和排序等功能,另外官网还给出了一些实现个性化功能的demo,如行内编辑,行折叠特效等。
更多特性请到官网查看: http://datatables.club/example/
如何使用
① 引入css和js文件
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap-responsive.min.css" rel="stylesheet">
<!—datatables的样式文件,我修改了其默认分页按钮的样式,所以加了后缀itoo ,和官网下载的不一样-->
<link href="bootstrap-3.3.0-dist/dist/css/jquery.dataTables-itoo.css" rel="stylesheet">
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js">script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js">script>
<script src="bootstrap-3.3.0-dist/dist/js/jquery.dataTables.min.js">script>
附件: 上述文件均打包在附件中,点我下载。
② Html代码
<body>
<div class="row-fluid" style="margin-top: 20px">
<div class="span1">div>
<div class="span10">
<table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>教师编号th>
<th>姓名th>
<th>组织机构th>
<th>课程类型th>
<th>课程名称th>
<th>总得分th>
tr>
thead>
<tbody>
tbody>
table>
body>
建立一个table标签,和空的
即可。
③JS代码
其中ajax.data参数和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.
添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": {
"user_id": 451
}
}
} );
另外一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中可以修改这个信息类.
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
} );
④ 后台controller代码
/**
* @Description: 课程评估结果查询
* @author 牛迁迁
* @date 2015年12月9日 上午12:35:21
* @param request
* @param response
* @throws UnsupportedEncodingException
*/
@SuppressWarnings(
{ "unchecked", "rawtypes" })
@RequestMapping(value = "/queryPageAssessResult", method = RequestMethod.GET)
public void queryPageAssessResult(HttpServletRequest request,
HttpServletResponse response) throws UnsupportedEncodingException
{
request.setCharacterEncoding("UTF-8");
// 数据起始位置
String start = request.getParameter("start");
// 数据长度 每页多少条数据
String length = request.getParameter("length");
// 获取前台传递过来的查询条件
String conditions = request.getParameter("extra_search");
// 进行转码操作,转成UTF-8编码格式
conditions = new String(conditions.getBytes("ISO-8859-1"), "UTF-8");
// 获取所操作的库名称
String dbName = "itoo_exam";
// 转换分页参数
int pageSize = Integer.parseInt(length);
int pageNum = Integer.parseInt(start) / pageSize + 1;
System.out.println("每页条数:======" + pageSize);
System.out.println("当前页号:======" + pageNum);
// 转Json工具类
toJsonUtil = new JacksonJsonUntil();
// 实例化一个分页类
PageEntity pageCourseAssessResult = new PageEntity();
try
{
// 第1种情况:无条件分页查询
if (conditions == null || conditions == "")
{
pageCourseAssessResult = courseAssessResultBean
.queryPageCourseAssessResult(pageNum, pageSize, dbName);
}
else
{
// 第2种情况:有条件分页查询
pageCourseAssessResult = courseAssessResultBean
.queryPageCourseAssessResultByCondition(pageNum,
pageSize, conditions, dbName);
}
// 如果查询信息为空也重新绑定数据。
if (pageCourseAssessResult.getRows() == null) {
List courseTypeList = new ArrayList();
pageCourseAssessResult.setRows(courseTypeList);
}
System.out.println(pageCourseAssessResult.getTotal());
//声明一个map,往前台传值
Map
Controller的作用主要是获取前台传递过来的参数,并根据参数调用Server层方法查询到结果,然后将结果按照datatables指定的格式返回给前台。这个格式就是:
//声明一个map,往前台传值
Map<Object, Object> info = new HashMap<Object, Object>();
//查询到的实体信息
info.put("coursedata", pageCourseAssessResult.getRows());
//实体信息总条数
info.put("recordsTotal",pageCourseAssessResult.getTotal());
coursedata这个名称是咱们在JS里,dataSrc : " coursedata "
指定的,意思是加载返回的数据源,如果返回的集合不是这个名称,将不能绑定值;recordsTotal
是记录总数,参数名称必须是这个,没商量。
⑤ 显示效果
小结
本篇博客主要讲解了Datatables的使用,我们喜欢EasyUI封装的功能,同时也中意Bootstrap封装的样式,要想鱼和熊掌兼得,那就需要用Datatables啦。
学会站在巨人的肩膀上,哈哈。。