jQuery表格插件datatables用法總結（中）

3、實例講解

一、需求：以下圖所示，對datatables的內容進行添加，編輯，刪除的操做。

二、分析：添加功能---單擊add按鈕，彈出對話框，添加新的內容。

            編輯功能---單擊datatables能夠選中一行，此行改變顏色，便是已經選中，單擊edit按鈕，彈出dialog，此dialog中的內容是咱們選中行的內容。若是沒有選中行，點擊edit按鈕，則不會彈出dialog。當雙擊datatables中的某一行時，也彈出dialog，而且雙擊的行改變顏色，dialog中的內容是咱們雙擊行的內容。

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

三、 編碼：

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的操做。

添加功能效果圖

 

編輯功能效果圖：

               

刪除效果圖：

 

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

四、分頁實現

引入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，顯示信息。