jQuery表格外掛程式datatables用法詳解，jquerydatatables

jQuery表格外掛程式datatables用法詳解，jquerydatatables

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

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

二、如何使用
在做背景時候並沒有美工和前端工程師來配合你做頁面，為了顯示資料並有一定的美感，我們可以使用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  伺服器端資料 

三、執行個體講解

1、需求：如所示，對datatables的內容進行添加，編輯，刪除的操作。

2、分析：添加功能---單擊add按鈕，彈出對話方塊，添加新的內容。
            編輯功能---單擊datatables可以選中一行，此行改變顏色，即是已經選中，單擊edit按鈕，彈出dialog，此dialog中的內容是我們選中行的內容。如果沒有選中行，點擊edit按鈕，則不會彈出dialog。當雙擊datatables中的某一行時，也彈出dialog，並且雙擊的行改變顏色，dialog中的內容是我們雙擊行的內容。
            刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要刪除所選內容。當沒有選中任何內容時，單擊delete按鈕，不會彈出警告框，也不會刪除內容。
3、 編碼：
Attributes//名稱

 <table id="gridtable" class="gridtable">//聲明jquery datatables    <thead>      <tr>        <th>Name        </th>        <th>Value        </th>        <th>DisplayOrder       </th>     </tr>   </thead>   <tbody>     .....//datatables內容，此處省略   </tbody> </table> <input type="button" id="add" value="Add" />//添加按鈕 <input type="button" id="edit" value="Edit" />//編輯按鈕 <input type="button" id="delete" value="Delete" />//刪除按鈕   <div id="e_Attributes">//聲明dialog,非同步更新   @using (Ajax.BeginForm("Update", "Product", new AjaxOptions {   UpdateTargetId = "d_Attributes",   OnSuccess = "dialogClose",   HttpMethod = "Post", }))   {     <table>       <tbody>         <tr>                        <td>Name</td>           <td>            <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td>         </tr>         <tr>           <td>Value</td>           <td>             <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td>         </tr>         <tr>            <td>DisplayOrder</td>           <td>             <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td>         </tr>         <tr>           <td>             <input id="submit" type="submit" name="submit" value="Submit" />             <input id="hiddenValue" type="hidden" name="hiddenValue" />           </td>         </tr>       </tbody>     </table>   } </div> 

上面代碼說明：這段代碼主要分了兩個部分，第一部分是jquery datatables的聲明，<table id="gridtable" class="gridtable">；第二部分是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的操作。
添加功能

 

編輯功能：

               

刪除：

 

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

引入CSS檔案和JS檔案

<style type="text/css" title="currentStyle">     @import "DataTables-1.8.1/media/css/demo_page.css";     @import "DataTables-1.8.1/media/css/demo_table.css";     @import "DataTables-1.8.1/media/css/demo_table_jui.css"; </style> <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>    --------------------------------------------------------------------------   -----------最簡單的方式：  $(document).ready(function() {  $("#example").dataTable(); });   ----------也可以自己定義各屬性： <script type="text/javascript" language="javascript">     $(document).ready(function() {       $("#example").dataTable({ //        "bPaginate": true, //開關，是否顯示分頁器 //        "bInfo": true, //開關，是否顯示表格的一些資訊 //        "bFilter": true, //開關，是否啟用用戶端過濾器 //        "sDom": "<>lfrtip<>", //        "bAutoWith": false, //        "bDeferRender": false, //        "bJQueryUI": false, //開關，是否啟用JQueryUI風格 //        "bLengthChange": true, //開關，是否顯示每頁大小的下拉框 //        "bProcessing": true, //        "bScrollInfinite": false, //        "sScrollY": "800px", //是否開啟垂直滾動，以及指定捲動區域大小,可設值：'disabled','2000px' //        "bSort": true, //開關，是否啟用各列具有按列排序的功能 //        "bSortClasses": true, //        "bStateSave": false, //開關，是否開啟用戶端狀態記錄功能。這個資料是記錄在cookies中的，開啟了這個記錄後，即使重新整理一次頁面，或重新開啟瀏覽器，之前的狀態都是儲存下來的- ------當值為true時aoColumnDefs不能隱藏列 //        "sScrollX": "50%", //是否開啟水平滾動，以及指定捲動區域大小,可設值：'disabled','2000%' //        "aaSorting": [[0, "asc"]], //        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隱藏列 //        "sDom": '<"H"if>t<"F"if>',         "bAutoWidth": false, //自適應寬度         "aaSorting": [[1, "asc"]],         "sPaginationType": "full_numbers",         "oLanguage": {           "sProcessing": "正在載入中......",           "sLengthMenu": "每頁顯示 _MENU_ 條記錄",           "sZeroRecords": "對不起，查詢不到相關資料！",           "sEmptyTable": "表中無資料存在！",           "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",           "sInfoFiltered": "資料表中共為 _MAX_ 條記錄",           "sSearch": "搜尋",           "oPaginate": {             "sFirst": "首頁",             "sPrevious": "上一頁",             "sNext": "下一頁",             "sLast": "末頁"           }         } //多語言配置         });     });   </script> 

對於 dataTables 來說，表格必須通過 thead 和 tbody 進行說明，如下所示，

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">     <thead>       <tr>         <th>           Rendering engine         </th>         <th>           Browser         </th>         <th>           Platform(s)         </th>         <th>           Engine version         </th>         <th>           CSS grade         </th>       </tr>     </thead>     <tbody>       <tr class="odd gradeX">         <td>           Trident         </td>         <td>           Internet Explorer 4.0         </td>         <td>           Win 95+         </td>         <td class="center">           4         </td>         <td class="center">           X         </td>       </tr>

 如果沒有 thead 將會報錯。

• bPaginate: 是否分頁，預設為 true，分頁
• iDisplayLength : 每頁的行數，每頁預設數量:10
• sPaginationType: 分頁樣式，支援兩種內建方式，two_button 和 full_numbers, 預設使用 two_button。
• bLengthChange : 是否允許使用者通過一個下拉式清單來選擇分頁後每頁的行數。行數為 10，25，50，100。這個設定需要 bPaginate 支援。預設為 true。
• bFilter: 啟用或禁止資料過濾，預設為 true。 注意，如果使用過濾功能，但是希望關閉預設的過濾輸入框，應使用 sDom
• bInfo: 允許或者禁止表資訊的顯示，預設為 true，顯示資訊。

最為簡單的使用方式，就是零配置的方式。

/* * Example init */$(document).ready(function(){  $('#example').dataTable();});

以上就是關於jQuery表格外掛程式datatables用法的詳細介紹，希望對大家的學習有所協助。

您可能感興趣的文章:

• JQuery外掛程式iScroll實現下拉重新整理，滾動翻頁特效
• 一個簡單的jQuery外掛程式ajaxfileupload.js實現ajax上傳檔案例子
• 推薦10個2014年最佳的jQuery視頻外掛程式
• 推薦8款jQuery輕量級樹形Tree外掛程式
• web前端設計師們常用的jQuery特效外掛程式匯總
• JQuery右鍵菜單外掛程式ContextMenu使用指南
• jquery圖片播放瀏覽外掛程式prettyPhoto使用詳解
• 分享2個jQuery外掛程式--jquery.fileupload與artdialog
• 限制上傳檔案大小和格式的jQuery外掛程式執行個體
• jQuery外掛程式slick實現響應式移動端投影片圖片切換特效