成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

一、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='http://www.gimoo.net/t/1904/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="http://www.gimoo.net/t/1904/DataTables-1.8.1/media/js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="http://www.gimoo.net/t/1904/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用法的詳細介紹，希望對大家的學習有所幫助。