jQuery控件 ---DataTables 学习
这俩天做一个需求，需要对表的增删改等操作，于是就选择了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;
}