jQuery控件 ---DataTables 学习

这俩天做一个需求，需要对表的增删改等操作，于是就选择了jQuery的控件 DataTables。
1、Datatables简介
      1.1说明：
          DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：
自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的
2、如何使用：
            在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务

            1、DataTables的默认配置
[javascript] 
 $(document).ready(function() { 
$('#example').dataTable(); 
} ); 
            2、DataTables的一些基础属性配置
[javascript] 
                   "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度 
                3、数据排序
[javascript] 
$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} ); 

从第0列开始，以第4列倒序排列
                 4、隐藏某些列
[javascript] 
    $(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} ); 
                  5、国际化
[javascript] 
$(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、排序功能：
[javascript] 
$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} ); 

7、数据获取支持4种：如下
[html] 
•DOM   文档数据 
•Javascript array  js数组 
•Ajax source     Ajax请求数据 
•Server side processing  服务器端数据 

3、案例说明：
通过JS数组获取的

[javascript] 
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');}); 
} 

[javascript] 
/*获取当前选择行的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; 
}  www.2cto.com

[javascript] 
//获取所有的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; 
}