jQuery控件 ---DataTables 学习
来源:互联网 发布:angularjs 解析json 编辑:程序博客网 时间:2024/05/12 09:56
这俩天做一个需求,需要对表的增删改等操作,于是就选择了jQuery的控件 DataTables。
1、Datatables简介
1.1说明:
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
- 自动分页处理
- 即时表格数据过滤
- 数据排序以及数据类型自动检测
- 自动处理列宽度
- 可通过CSS定制样式
- 支持隐藏列
- 易用
- 可扩展性和灵活性
- 国际化
- 动态创建表格
- 免费的
2、如何使用:
在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置
$(document).ready(function() { $('#example').dataTable(); } );
2、DataTables的一些基础属性配置
"bPaginate": true, //翻页功能"bLengthChange": true, //改变每页显示数据数量"bFilter": true, //过滤功能"bSort": false, //排序功能"bInfo": true,//页脚信息"bAutoWidth": true//自动宽度
3、数据排序
$(document).ready(function() {$('#example').dataTable( {"aaSorting": [[ 4, "desc" ]]} );} );
从第0列开始,以第4列倒序排列
4、隐藏某些列
$(document).ready(function() {$('#example').dataTable( {"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },{ "bVisible": false, "aTargets": [ 3 ] }] } );} );
5、国际化
$(document).ready(function() {$('#example').dataTable( {"oLanguage": {"sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "抱歉, 没有找到","sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"},"sZeroRecords": "没有检索到数据","sProcessing": "<img src='./loading.gif' />"}} );} );
6、排序功能:
$(document).ready(function() {$('#example').dataTable( {"aoColumns": [null,{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc", "asc" ] },{ "asSorting": [ ] },{ "asSorting": [ ] }]} );} );
7、数据获取支持4种:如下
•DOM 文档数据•Javascript array js数组•Ajax source Ajax请求数据•Server side processing 服务器端数据
3、案例说明:
通过JS数组获取的
var oTable;/*课程数据*/function courseData(data) { var courseArrayData= new Array(); var result = eval(data); col=result.length; for(var j=0; j<col ;j++) { var meetInfoArr= new Array(); var meetInfoObj = result[j]; meetInfoArr.push(meetInfoObj['meetinginfoid']); meetInfoArr.push(meetInfoObj['meetingName']); meetInfoArr.push(meetInfoObj['meetingcontent']); meetInfoArr.push(meetInfoObj['meetinghost']); meetInfoArr.push(meetInfoObj['meetingcreatetime']); meetInfoArr.push("<img alt='编辑' title='编辑' src='images/edit.png' border='0' style='padding-left: 5px;cursor: pointer' onclick='editCourseShow("+meetInfoObj['meetinginfoid']+")'>"); meetInfoArr.push("<img alt='设置课程图片' title='设置课程图片' src='images/setting.png' border='0' style='padding-left: 5px;cursor: pointer' onclick='setCourseImage("+meetInfoObj['meetinginfoid']+")'>"); courseArrayData.push(meetInfoArr); } $('#courseWin').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'); oTable = $('#example').dataTable({ "bJQueryUI": true, "sScrollY": 200, "sPaginationType": "full_numbers","oLanguage": {"sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "抱歉, 没有找到","sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"},"sZeroRecords": "没有检索到数据"},"aaSorting": [ [ 4, "desc" ] ], "aaData":courseArrayData, "bLengthChange": true, "aoColumns": [ { "sTitle": "meetingid", "bVisible":false }, { "sTitle": "课程名称", "sClass": "center" }, { "sTitle": "课程描述" }, { "sTitle": "课程老师", "sClass": "center" }, { "sTitle": "课程创建时间", "sClass": "center" }, { "sTitle": "操作", "sClass": "wp10 taleft", "bSortable": false }, { "sTitle": "设置课程图片", "sClass": "wp10 taleft", "bSortable": false }] }); $('#example tr').dblclick( function() {$(this).toggleClass('row_selected');});}
/*获取当前选择行的HTML对象,包括 被隐藏的列*/function fnGetSelected(oTableLocal){ var aReturn = new Array(); var aTrs = oTableLocal.fnGetNodes(); for(var i =0 ; i < aTrs.length ;i++){ if($(aTrs[i]).hasClass('row_selected')){ aReturn.push(oTableLocal.fnGetData(aTrs[i])); } } return aReturn;}
//获取所有的datatables数据funciton getAllDatatableData(oTableLocal){ var aReturn =new Array(); var aTrs = oTableLocal.fnGetNodes(); for(var i=0; i<aTrs.length;i++){ aReturn.push(oTableLocal.fnGetData(aTrs[i])); } return aReturn;}
- jQuery控件 ---DataTables 学习
- jQuery控件 ---DataTables 学习
- jQuery控件 ---DataTables 学习
- Jquery.datatables 学习笔记
- jquery.dataTables学习
- JQuery DataTables学习
- 【JQuery,前端】jquery datatables 学习笔记
- datatables是jQuery的控件,amazeUI沿用了此控件
- Jquery.datatables 学习笔记之综述
- Jquery.datatables 学习笔记之综述
- Datatables学习笔记--jquery表格插件
- 对Jquery DataTables的学习(一)
- JQuery DataTables的学习笔记整理
- jquery dataTables
- Jquery-dataTables
- jquery datatables
- jquery datatables
- jQuery DataTables
- S3C6410 PWM驱动(三) --- 源代码
- Python multiprocessing 使用手记[3] – 关于Queue
- C++拷贝构造函数(深拷贝,浅拷贝)
- 鸡蛋饭
- 子串之最问题
- jQuery控件 ---DataTables 学习
- Linux SCSI 子系统剖析
- source insight使用技巧
- 二维码及彩色扩容
- hash buckets and chains,对buffer的搜索获取
- 设计模式笔记之---单例模式
- 黑客博客
- linux内核中USB总线的hub中断的调用
- 单例模式