一、Datatables簡介
DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支持任何HTML表格。主要特點：
二、如何使用
在做后臺的時候并沒有美工和前端工程師來配合你做頁面，為了顯示數據并有一定的美感，我們可以使用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種：如下
三、實例講解
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 將會報錯。
最為簡單的使用方式，就是零配置的方式。
/* * Example init */$(document).ready(function(){ $('#example').dataTable();});以上就是關于jQuery表格插件datatables用法的詳細介紹，希望對大家的學習有所幫助。
新聞熱點
疑難解答
