强大的表格控件-Datatables
2016-02-27 22:55
676 查看
背景介绍
是不是习惯了EasyUI封装的DataGrid表格，传入一个json串，就可以自动加载数据，显示分页，还能实现一些特殊需求，如行内编辑，操作列等。而使用bootstrap表格的话，则需要完全自己手写table和分页控件，并且将两者组合到一起，才是个完整的表格，代码量大不说，如果需要实现一些特殊的需求，行内编辑等那就更加繁琐了。
Datatables
所以我寻找到了一款bootstrap风格的第三方表格插件：datatables。
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以给任何HTML表格添加高级的交互功能。提供分页，即时搜索和排序等功能，另外官网还给出了一些实现个性化功能的demo，如行内编辑，行折叠特效等。
更多特性请到官网查看： http://datatables.club/example/
如何使用
① 引入css和js文件
默认分页样式：
修改后样式：
附件： 上述文件均打包在附件中，点我下载。
② Html代码
建立一个table标签，
③JS代码
其中ajax.data参数和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.
添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如:
另外一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中可以修改这个信息类.
④ 后台controller代码
Controller的作用主要是获取前台传递过来的参数，并根据参数调用Server层方法查询到结果，然后将结果按照datatables指定的格式返回给前台。这个格式就是：
coursedata这个名称是咱们在JS里，
⑤ 显示效果
小结
本篇博客主要讲解了Datatables的使用，我们喜欢EasyUI封装的功能，同时也中意Bootstrap封装的样式，要想鱼和熊掌兼得，那就需要用Datatables啦。
学会站在巨人的肩膀上，哈哈。。
是不是习惯了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">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script> <!-- datatables JavaScript 文件 --> <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标签，
<thead>和空的
<tbody>即可。
③JS代码
<script type="text/javascript">
var table;
$(document).ready(function() {
var lastIdx = null;
<!--datatables表格初始化方法-->
table = $('#table_local').DataTable({
//通过ajax向后台controller请求数据
ajax : {
url : "queryPageAssessResult",
dataSrc : " coursedata ",
data : function ( d ) {
var searchContent = $('#searchContent').val();
//添加额外的参数传给服务器
d.extra_search = searchContent;
}
},
//绑定列数据，名字和json串里的key相同，只有这里绑定了表格中才会显示数据
columns : [
{data : 'teacherCode'},
{data : 'teacherName'},
{data : 'teacherDepartment'},
{data : 'courseType'},
{data : 'courseName'},
{data : 'avgScore'}
],
processing : true, //打开数据加载时的等待效果
serverSide : true,//打开后台分页
ordering : false,//是否启用排序
searching : false,//是否 启用模糊搜索
//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
deferRender : true,
//国际化设置（设置中文显示）
language : {
lengthMenu : '<div style="float:left;height:33px;line-height:33px;overflow:hidden;text-align:center" >每页条数：</div><div style="float:left"><select class="form-control input-xsmall" style="float:right">'
+ '<option value="1">1</option>'
+ '<option value="5">5</option>'
+ '<option value="10">10</option>'
+ '<option value="20">20</option>'
+ '<option value="30">30</option>'
+ '<option value="40">40</option>'
+ '<option value="50">50</option>'
+ '</select></div>',//左上角的分页大小显示。
search : '<span class="label label-success">搜索：</span>',//右上角的搜索文本，可以写html标签
paginate : {//分页的样式内容。
previous : "上一页",
next : "下一页",
first : "第一页",
last : "最后"
},
zeroRecords : "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info : "共_PAGES_ 页，显示第_START_ 到第 _END_ ，共_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty : "0条记录",//筛选为空时左下角的显示。
infoFiltered : ""//筛选之后的左下角筛选提示，
},
paging : true,
pagingType : "full_numbers"//分页样式的类型full_numbers
});
$("#table_local_filter input[type=search]").css({
width : "auto"
});//右上角的默认搜索文本框，不写这个就超出去了。
//鼠标经过时高亮
$('#table_local tbody').on( 'mouseover', 'td', function () {
var colIdx = table.cell(this).index().column;
if ( colIdx !== lastIdx ) {
$( table.cells().nodes() ).removeClass( 'highlight' );
$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
}
} ).on( 'mouseleave', function () {
$( table.cells().nodes() ).removeClass( 'highlight' );
} );
//点击某行后高亮
$('#table_local tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
//鼠标双击事件，弹出提示。
$('#table_local tbody').on('dblclick','tr',function() {
//获取该行数据
var data = table.row(this).data();
//做一些其他操作
});
});
</script>其中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<CourseAssessResult> pageCourseAssessResult = new PageEntity<CourseAssessResult>();
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<CourseAssessResult> courseTypeList = new ArrayList<CourseAssessResult>();
pageCourseAssessResult.setRows(courseTypeList);
}
System.out.println(pageCourseAssessResult.getTotal());
//声明一个map，往前台传值
Map<Object, Object> info = new HashMap<Object, Object>();
//查询到的实体信息
info.put("coursedata", pageCourseAssessResult.getRows());
//实体信息总条数
info.put("recordsTotal", pageCourseAssessResult.getTotal());
toJsonUtil.beanToJson(response, info);
}
catch (Exception e)
{
e.printStackTrace();
}
}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啦。
学会站在巨人的肩膀上，哈哈。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布，Web 前端 UI 框架
- angular 指令简述
- flex 控件的重要属性
- Flex4 DataGrid中嵌入RadioButton实现思路及代码
- datagrid不可编辑行有关问题的控制方法
- Delphi控件ListView的属性及使用方法详解
- web下载的ActiveX控件自动更新
- C#实现改变DataGrid某一行和单元格颜色的方法
- C#设置WinForm中DataGrid列的方法(列宽/列标题等)
- WinForm实现按名称递归查找控件的方法
- C#中父窗口和子窗口之间控件互操作实例
- jquery+CSS3实现淘宝移动网页菜单效果
- Android编程之Button控件用法实例分析
- Android控件之CheckBox、RadioButton用法实例分析
- MFC中动态创建控件以及事件响应实现方法
- WinForm自定义函数FindControl实现按名称查找控件
- Android控件之ProgressBar用法实例分析
- WinForm拖拽控件生成副本的解决方法
- ASP.NET动态添加用户控件的方法