JQuery DataTables學習

JQuery DataTables學習
1、Datatables簡介

 

DataTables是一個jQuery的表格外掛程式。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支援任何HTML表格。主要特點：

• 自動分頁處理即時表格式資料過濾資料排序以及資料類型自動檢測自動處理列寬度可通過CSS定製樣式支援隱藏列易用可擴充性和靈活性國際化動態建立表格免費的2、如何使用：

   

  在做背景時候並沒有美工和前端工程師來配合你做頁面，為了顯示資料並有一定的美感，我們可以使用jQuery的DataTables外掛程式來協助我們完成任務

  1、DataTables的預設配置

   

  [javascript] view plaincopyprint? 
  1. $(document).ready(function() {
  2. $('#example').dataTable();
  3. } );

   

  2、DataTables的一些基礎屬性配置

   

  [javascript] view plaincopyprint? 
  1. "bPaginate": true, //翻頁功能
  2. "bLengthChange": true, //改變每頁顯示資料數量
  3. "bFilter": true, //過濾功能
  4. "bSort": false, //排序功能
  5. "bInfo": true,//頁尾資訊
  6. "bAutoWidth": true//自動寬度

   

  3、資料排序

   

  [javascript] view plaincopyprint? 
  1. $(document).ready(function() {
  2. $('#example').dataTable( {
  3. "aaSorting": [
  4. [ 4, "desc" ]
  5. ]
  6. } );
  7. } );
  
  從第0列開始，以第4列倒序排列
  

   

   

   

  4、隱藏某些列

   

   

  [javascript] view plaincopyprint? 
  1. $(document).ready(function() {
  2. $('#example').dataTable( {
  3. "aoColumnDefs": [
  4. { "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
  5. { "bVisible": false, "aTargets": [ 3 ] }
  6. ] } );
  7. } );

   

  5、國際化

   

  [javascript] view plaincopyprint? 
  1. $(document).ready(function() {
  2. $('#example').dataTable( {
  3. "oLanguage": {
  4. "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
  5. "sZeroRecords": "抱歉， 沒有找到",
  6. "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條資料",
  7. "sInfoEmpty": "沒有資料",
  8. "sInfoFiltered": "(從 _MAX_ 條資料中檢索)",
  9. "oPaginate": {
  10. "sFirst": "首頁",
  11. "sPrevious": "前一頁",
  12. "sNext": "後一頁",
  13. "sLast": "尾頁"
  14. },
  15. "sZeroRecords": "沒有檢索到資料",
  16. "sProcessing": ""
  17. }
  18. } );
  19. } );
  
  

   

  6、排序功能：

   

  [javascript] view plaincopyprint? 
  1. $(document).ready(function() {
  2. $('#example').dataTable( {
  3. "aoColumns": [
  4. null,
  5. { "asSorting": [ "asc" ] },
  6. { "asSorting": [ "desc", "asc", "asc" ] },
  7. { "asSorting": [ ] },
  8. { "asSorting": [ ] }
  9. ]
  10. } );
  11. } );
  
  

   

   

  7、資料擷取支援4種：如下

   

  [html] view plaincopyprint? 
  1. ?DOM 文檔資料
  2. ?Javascript array js數組
  3. ?Ajax source Ajax請求資料
  4. ?Server side processing 伺服器端資料
  3、參數講解： 

  以下是在進行dataTable綁定處理時候可以附加的參數：

  屬性名稱	取值範圍	解釋
  bAutoWidth	true or false, default true	是否自動計算表格各列寬度
  bDeferRender	true or false, default false	用於渲染的一個參數
  bFilter	true or false, default true	開關，是否啟用用戶端過濾功能
  bInfo	true or false, default true	開關，是否顯示表格的一些資訊
  bJQueryUI	true or false, default false	是否使用jquery ui themeroller的風格
  bLengthChange	true or false, default true	開關，是否顯示一個每頁長度的選擇條（需要分頁器支援）
  bPaginate	true or false, default true	開關，是否顯示（使用）分頁器
  bProcessing	true or false, defualt false	開關，以指定當正在處理資料的時候，是否顯示“正在處理”這個提示資訊
  bScrollInfinite	true or false, default false	開關，以指定是否無限滾動（與sScrollY配合使用），在大資料量的時候很有用。當這個標誌為true的時候，分頁器就預設關閉
  bSort	true or false, default true	開關，是否讓各列具有按列排序功能
  bSortClasses	true or false, default true	開關，指定噹噹前列在排序時，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，開啟後，在處理大資料時，效能有所損失
  bStateSave	true or false, default false	開關，是否開啟用戶端狀態記錄功能。這個資料是記錄在cookies中的，開啟了這個記錄後，即使重新整理一次頁面，或重新開啟瀏覽器，之前的狀態都是儲存下來的
  sScrollX	'disabled' or '100%' 類似的字串	是否開啟水平滾動，以及指定捲動區域大小
  sScrollY	'disabled' or '200px' 類似的字串	是否開啟垂直滾動，以及指定捲動區域大小
  --	--	--
  選項
  aaSorting	array array[int,string], 如[], [[0,'asc'], [0,'desc']]	指定按多列資料排序的依據
  aaSortingFixed	同上	同上。唯一不同點是不能被使用者的自訂配置衝突
  aLengthMenu	default [10, 25, 50, 100]，可以為一維數組，也可為二維數組，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]]	這個為選擇每頁的條目數，當使用一個二維數組時，二維層面只能有兩個元素，第一個為顯示每頁條目數的選項，第二個是關於這些選項的解釋
  aoSearchCols	default null, 類似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}]	給每個列單獨定義其初始化搜尋列表特性（這一塊還沒搞懂）
  asStripClasses	default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3']	指定要被應用到各行的class風格，會自動迴圈
  bDestroy	true or false, default false	用於當要在同一個元素上執行新的dataTable綁定時，將之前的那個資料對象清除掉，換以新的對象設定
  bRetrieve	true or false, default false	用於指明當執行dataTable綁定時，是否返回DataTable對象
  bScrollCollapse	true or false, default false	指定適當的時候縮起滾動視圖
  bSortCellsTop	true or false, default false	（未知的東東）
  iCookieDuration	整數，預設7200，單位為秒	指定用於儲存用戶端資訊到cookie中的時間長度，超過這個時間後，自動到期
  iDeferLoading	整數，預設為null	消極式載入，它的參數為要載入條目的數目，通常與bServerSide，sAjaxSource等配合使用
  iDisplayLength	整數，預設為10	用於指定一屏顯示的條數，需開啟分頁器
  iDisplayStart	整數，預設為0	用於指定從哪一條資料開始顯示到表格中去
  iScrollLoadGap	整數，預設為100	用於指定當DataTable設定為滾動時，最多可以一屏顯示多少條資料
  oSearch	預設{ "sSearch": "", "bRegex": false, "bSmart": true }	又是初始時指定搜尋參數相關的，有點複雜，沒搞懂目前
  sAjaxDataProp	字串，default 'aaData'	指定當從服務端擷取表格式資料時，資料項目使用的名字
  sAjaxSource	URL字串，default null	指定要從哪個URL擷取資料
  sCookiePrefix	字串，default 'SpryMedia_DataTables_'	當開啟狀態儲存特性後，用於指定儲存在cookies中的字串的首碼名字
  sDom	default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)	這是用於定義DataTable布局的一個強大的屬性，另開專門文檔來補充說明吧
  sPaginationType	'full_numbers' or 'two_button', default 'two_button'	用於指定分頁器風格
  sScrollXInner	string default 'disabled'	又是水平滾動相關的，沒搞懂啥意思

  
  
  DataTable支援如下回呼函數
  

  回呼函數名稱	參數	傳回值	預設	功能
  fnCookieCallback	1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set	string: cookie formatted string (which should be encoded by using encodeURIComponent())	null	當每次cookies改變時，會觸發這個函數調用
  fnDrawCallback	無	無	無	在每次table被draw完後調用，至於做什麼就看著辦吧
  fnFooterCallback	1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array	無	無	用於在每次重畫的時候修改表格的腳部
  fnFormatNumber	1.int : number to be formatted	String : formatted string for DataTables to show the number	有預設的	用於在大數字上，自動加入一些逗號，分隔開
  fnHeaderCallback	1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array	無	無	用於在每次draw發生時，修改table的header
  fnInfoCallback	1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules	string: The string to be displayed in the information element.	無	用於傳達table資訊
  fnInitComplete	1.object:oSettings - DataTables settings object	無	無	表格初始化完成後調用
  fnPreDrawCallback	1.object:oSettings - DataTables settings object	Boolean	無	用於在開始繪製之前調用，返回false的話，會阻止draw事件發生；返回其它值，draw可以順利執行
  fnRowCallback	1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering)	node : "TR" element for the current row	無	當建立了行，但還未繪製到螢幕上的時候調用，通常用於改變行的class風格
  fnServerData	1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page.	void	$.getJSON	用於替換預設發到服務端的請求操作
  fnStateLoadCallback	1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code.	Boolean - false if the state should not be loaded, true otherwise	無	在cookies中的資料被載入前執行，可以方便地修改這些資料
  fnStateSaveCallback	1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie.	String - the full string that should be used to save the state	無	在狀態資料被儲存到cookies前執行，可以方便地做一些預操作

  
  

   

  4、執行個體講解：
  

   

   

  1. 需求：如所示，對datatables的內容進行添加，編輯，刪除的操作。
     分析：添加功能---單擊add按鈕，彈出對話方塊，添加新的內容。

      

     編輯功能---單擊datatables可以選中一行，此行改變顏色，即是已經選中，單擊edit按鈕，彈出dialog，此dialog中的內容是我們選中行的內容。如果沒有選中行，點擊edit按鈕，則不會彈出dialog。當雙擊datatables中的某一行時，也彈出dialog，並且雙擊的行改變顏色，dialog中的內容是我們雙擊行的內容。

     刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要刪除所選內容。當沒有選中任何內容時，單擊delete按鈕，不會彈出警告框，也不會刪除內容。

     3. 編碼：

      

     Attributes//名稱

       //聲明jquery datatables              .....//datatables內容，此處省略     

     Name	Value	DisplayOrder

     //添加按鈕 //編輯按鈕 //刪除按鈕//聲明dialog,非同步更新 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions { UpdateTargetId = "d_Attributes", OnSuccess = "dialogClose", HttpMethod = "Post", })) {

     Name	*
     Value	*
     DisplayOrder	*

     }
     

      

     上面代碼說明：這段代碼主要分了兩個部分，第一部分是jquery datatables的聲明，

     ；第二部分是dialog的聲明，以及操作所需要的action，此部分的操作選擇ajax無重新整理頁面技術。所需js的代碼：

      

      

      <script type="text/javascript">       function dialogClose() {           $("#e_Attributes").dialog("close");       }          $("#e_Attributes").dialog({           modal: true,           autoOpen: false,           show: {              effect: "blind",             duration: 1000          },          hide: {              effect: "explode",              duration: 1000         },         width: 400      });        var editor;        $(function () {         //聲明datatable          $("#gridtable").dataTable().fnDestroy();          editor = $('#gridtable').dataTable({             "bInfo":false,             "bServerSide": false,             'bPaginate': false,                      //是否分頁。              "bProcessing": false,                    //當datatable擷取資料時候是否顯示正在處理提示資訊。              'bFilter': false,                       //是否使用內建的過濾功能。              'bLengthChange': false,                  //是否允許使用者自訂每頁顯示條數。              'sPaginationType': 'full_numbers',      //分頁樣式          });         //單擊，賦值，改樣式         $("#gridtable tbody tr").click(function (e) {             if ($(this).hasClass('row_selected')) {                 $(this).removeClass('row_selected');                 putNullValue()             }             else {                 editor.$('tr.row_selected').removeClass('row_selected');                 $(this).addClass('row_selected');                 var aData = editor.fnGetData(this);                 if (null != aData) {                     putValue(aData);                 }             }         });        //雙擊         $("#gridtable tbody tr").dblclick(function () {             if ($(this).hasClass('row_selected')) {                 //$(this).removeClass('row_selected');             }             else {                 editor.$('tr.row_selected').removeClass('row_selected');                 $(this).addClass('row_selected');             }             var aData = editor.fnGetData(this);             if (null != aData) {                 putValue(aData);             }              $("#hiddenValue").val("edit");             $("#e_Attributes").dialog("open");          });         //添加         $("#add").click(function () {             editor.$('tr.row_selected').removeClass('row_selected');             putNullValue();              $("#hiddenValue").val("add");             $("#e_Attributes").dialog("open");         });        //編輯         $("#edit").click(function () {              var productAttributeID = $("#productAttributeID").val();             if (productAttributeID != "" && productAttributeID != null) {                 $("#hiddenValue").val("edit");                 $("#e_Attributes").dialog("open");             }          });         //刪除         $("#delete").click(function () {             var productAttributeID = $("#productAttributeID").val();             var productID = $("#productID").val();             if (productAttributeID != null && productAttributeID != "") {                 if (confirm("Delete?")) {                     $.ajax({                         type: "GET",                         url: "@Url.Action("DeleteAttribute", "Product")",                        data: { ProductID: productID, ProductAttributeID: productAttributeID },//參數名要和Action 中的參數名相同                         dataType: "html",                         cache: false,                         success: function (result) {                             $("#d_Attributes").html(result);                             $("#productAttributeID").val(null);                         }                     });                 }             }         });          //賦空值，並去除input-validation-error樣式（此樣式不管有無，均可去除，所以不用判斷了）         function putNullValue() {            。。。。。。／／此處省略         }         //賦值         function putValue(aData) {           。。。。。。//此處省略         }     });     $.ajaxSetup({ cache: false }); </script>

     
     
     

      

     上面代碼說明：這段代碼分別為dialog 的聲明，datatables的聲明以add,edit,delete的操作。

     添加功能

     編輯功能：

     刪除：

     到此，功能已經全部實現，所需的代碼也已經貼出。