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'  style='padding-left: 5px;cursor: pointer' οnclick='editCourseShow("+meetInfoObj['meetinginfoid']+")'>");
        meetInfoArr.push("<img alt='設定課程圖檔' title='設定課程圖檔' src='images/setting.png'  style='padding-left: 5px;cursor: pointer' οnclick='setCourseImage("+meetInfoObj['meetinginfoid']+")'>");
        courseArrayData.push(meetInfoArr);
    }
    $('#courseWin').html('<table cellpadding="0" cellspacing="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;
}