我們使用jquery datatables 不光是為了對數據的展示，同時需要對數據驚行簡單的操作，這個操作分為兩個部分：1.頁面內容的修改；2.對應的數據庫信息的修改。
前一篇博文介紹了頁面級的操作，這片文章主要是數據庫內容的更改。
- 需求：如下圖所示，對datatables的內容進行添加，編輯，刪除的操作。
- 分析：添加功能---單擊add按鈕，彈出對話框，添加新的內容。
編輯功能---單擊datatables可以選中一行，此行改變顏色，即是已經選中，單擊edit按鈕，彈出dialog，此dialog中的內容是我們選中行的內容。如果沒有選中行，點擊edit按鈕，則不會彈出dialog。當雙擊datatables中的某一行時，也彈出dialog，並且雙擊的行改變顏色，dialog中的內容是我們雙擊行的內容。
刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要刪除所選內容。當沒有選中任何內容時，單擊delete按鈕，不會彈出警告框，也不會刪除內容。
3. 編碼：
1 Attributes//名稱 2 <table id="gridtable" class="gridtable">//聲明jquery datatables 3 <thead> 4 <tr> 5 <th>Name 6 </th> 7 <th>Value 8 </th> 9 <th>DisplayOrder 10 </th> 11 </tr> 12 </thead> 13 <tbody> 14 .....//datatables內容，此處省略 15 </tbody> 16 </table> 17 <input type="button" id="add" value="Add" />//添加按鈕 18 <input type="button" id="edit" value="Edit" />//編輯按鈕 19 <input type="button" id="delete" value="Delete" />//刪除按鈕 20 21 22 <div id="e_Attributes">//聲明dialog,異步更新 23 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 24 { 25 UpdateTargetId = "d_Attributes", 26 OnSuccess = "dialogClose", 27 HttpMethod = "Post", 28 })) 29 { 30 <table> 31 <tbody> 32 <tr> 33 <td>Name</td> 34 <td> 35 <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 36 </tr> 37 <tr> 38 <td>Value</td> 39 <td> 40 <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 41 </tr> 42 <tr> 43 <td>DisplayOrder</td> 44 <td> 45 <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 46 </tr> 47 <tr> 48 <td> 49 <input id="submit" type="submit" name="submit" value="Submit" /> 50 <input id="hiddenValue" type="hidden" name="hiddenValue" /> 51 </td> 52 </tr> 53 </tbody> 54 </table> 55 } 56 </div>
上面代碼說明：這段代碼主要分了兩個部分，第一部分是jquery datatables的聲明，<table id="gridtable" class="gridtable">；第二部分是dialog的聲明，以及操作所需要的action，此部分的操作選擇ajax無刷新頁面技術。
所需js的代碼：
1 <script type="text/javascript"> 2 function dialogClose() { 3 $("#e_Attributes").dialog("close"); 4 } 5 6 $("#e_Attributes").dialog({ 7 modal: true, 8 autoOpen: false, 9 show: { 10 effect: "blind", 11 duration: 1000 12 }, 13 hide: { 14 effect: "explode", 15 duration: 1000 16 }, 17 width: 400 18 }); 19 20 var editor; 21 22 $(function () { 23 //聲明datatable 24 $("#gridtable").dataTable().fnDestroy(); 25 editor = $('#gridtable').dataTable({ 26 "bInfo":false, 27 "bServerSide": false, 28 'bPaginate': false, //是否分頁。 29 "bProcessing": false, //當datatable獲取數據時候是否顯示正在處理提示信息。 30 'bFilter': false, //是否使用內置的過濾功能。 31 'bLengthChange': false, //是否允許用戶自定義每頁顯示條數。 32 'sPaginationType': 'full_numbers', //分頁樣式 33 }); 34 //單擊，賦值，改樣式 35 $("#gridtable tbody tr").click(function (e) { 36 if ($(this).hasClass('row_selected')) { 37 $(this).removeClass('row_selected'); 38 putNullValue() 39 } 40 else { 41 editor.$('tr.row_selected').removeClass('row_selected'); 42 $(this).addClass('row_selected'); 43 var aData = editor.fnGetData(this); 44 if (null != aData) { 45 putValue(aData); 46 } 47 } 48 }); 49 //雙擊 50 $("#gridtable tbody tr").dblclick(function () { 51 if ($(this).hasClass('row_selected')) { 52 //$(this).removeClass('row_selected'); 53 } 54 else { 55 editor.$('tr.row_selected').removeClass('row_selected'); 56 $(this).addClass('row_selected'); 57 } 58 59 var aData = editor.fnGetData(this); 60 if (null != aData) { 61 putValue(aData); 62 } 63 64 $("#hiddenValue").val("edit"); 65 $("#e_Attributes").dialog("open"); 66 67 }); 68 //添加 69 $("#add").click(function () { 70 editor.$('tr.row_selected').removeClass('row_selected'); 71 putNullValue(); 72 73 $("#hiddenValue").val("add"); 74 $("#e_Attributes").dialog("open"); 75 }); 76 //編輯 77 $("#edit").click(function () { 78 var productAttributeID = $("#productAttributeID").val(); 79 if (productAttributeID != "" && productAttributeID != null) { 80 $("#hiddenValue").val("edit"); 81 $("#e_Attributes").dialog("open"); 82 } 83 84 }); 85 //刪除 86 $("#delete").click(function () { 87 var productAttributeID = $("#productAttributeID").val(); 88 var productID = $("#productID").val(); 89 if (productAttributeID != null && productAttributeID != "") { 90 if (confirm("Delete?")) { 91 $.ajax({ 92 type: "GET", 93 url: "@Url.Action("DeleteAttribute", "Product")", 94 data: { ProductID: productID, ProductAttributeID: productAttributeID },//參數名要和Action 中的參數名相同 95 dataType: "html", 96 cache: false, 97 success: function (result) { 98 $("#d_Attributes").html(result); 99 $("#productAttributeID").val(null); 100 } 101 }); 102 } 103 } 104 }); 105 106 //賦空值，並去除input-validation-error樣式（此樣式不管有無，均可去除，所以不用判斷了） 107 function putNullValue() { 108 。。。。。。／／此處省略 109 } 110 //賦值 111 function putValue(aData) { 112 。。。。。。//此處省略 113 } 114 }); 115 116 $.ajaxSetup({ cache: false }); 117 </script>
上面代碼說明：這段代碼分別為dialog 的聲明，datatables的聲明以add,edit,delete的操作。
添加功能效果圖
編輯功能效果圖：
刪除效果圖：
到此，功能已經全部實現，所需的代碼也已經貼出。