jQuery控件 ---DataTables 学习

http://blog.csdn.net/Dracotianlong/article/details/8013234

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