强大的表格控件-Datatables
来源:互联网 发布:淘宝上面做销售怎么做 编辑:程序博客网 时间:2024/06/05 17:00
背景介绍
是不是习惯了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啦。
学会站在巨人的肩膀上,哈哈。。
- 强大的表格控件-Datatables
- JQuery之DataTables强大的表格解决方案
- 强大的datatables
- jQuery的插件datatables,一个bootstrap风格的表格控件
- 强大的JQuery表格控件FooTable
- 强大的前端数据表格控件
- jQuery的表格插件datatables
- datatables 选项之DOM:定义表格控件在页面的显示顺序以及language语言选项
- jquery表格插件dataTables的详细使用说明
- Bootstrap风格的分页表格Datatables
- datatables表格分页和导出的例子
- Datatables之强大的sDom属性的应用
- 强大的ListView风格开源表格控件XPTable源码(C#)
- 强大的开源表格控件ReoGrid,有它Farpoint可以扔一边去了
- Jquery 表格插件DataTables
- DataTables分页表格
- datatables表格2
- datatables表格汉化
- MySQL5.7密码安全策略
- HDOJ_1425 sort 桶排序
- Leet Code OJ 100. Same Tree [Difficulty: Easy]
- 广师Android群分享之集成开发环境IDE
- Eclipse EE简单配置(软链接)
- 强大的表格控件-Datatables
- python 风格指南笔记
- 一个Bootstrap的例子--关于validate
- DDA应用实践-冈萨雷斯《数字图像处理》
- Android 自定义控件 轻松实现360软件详情页
- 广师Android群分享之网络
- Codeforces Round #321 (Div. 2)(A)模拟
- 如何得到Activities栈顶的Activity名称
- 数据挖掘之中文本的表示模型