jQuery插件datatables的用法及如何實現分頁程式碼詳解-js教程-PHP中文網

DataTables是一個jQuery的表格外掛。

實例講解

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" />//删除按钮 
  
  
<p 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> 
  } 
</p>

登入後複製

上面程式碼說明：這段程式碼主要分了兩個部分，第一部分是jquery datatables的聲明，

；第二部分是dialog的聲明，以及操作所需的action，此部分的操作選擇ajax無刷新頁面技術。所需js的程式碼：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<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 = $(&#39;#gridtable&#39;).dataTable({ 
      "bInfo":false, 
      "bServerSide": false, 
      &#39;bPaginate&#39;: false,           //是否分页。 
       "bProcessing": false,          //当datatable获取数据时候是否显示正在处理提示信息。 
       &#39;bFilter&#39;: false,            //是否使用内置的过滤功能。 
       &#39;bLengthChange&#39;: false,         //是否允许用户自定义每页显示条数。 
       &#39;sPaginationType&#39;: &#39;full_numbers&#39;,   //分页样式 
     }); 
    //单击，赋值，改样式 
    $("#gridtable tbody tr").click(function (e) { 
      if ($(this).hasClass(&#39;row_selected&#39;)) { 
        $(this).removeClass(&#39;row_selected&#39;); 
        putNullValue() 
      } 
      else { 
        editor.$(&#39;tr.row_selected&#39;).removeClass(&#39;row_selected&#39;); 
        $(this).addClass(&#39;row_selected&#39;); 
        var aData = editor.fnGetData(this); 
        if (null != aData) { 
          putValue(aData); 
        } 
      } 
    }); 
    //双击 
    $("#gridtable tbody tr").dblclick(function () { 
      if ($(this).hasClass(&#39;row_selected&#39;)) { 
        //$(this).removeClass(&#39;row_selected&#39;); 
      } 
      else { 
        editor.$(&#39;tr.row_selected&#39;).removeClass(&#39;row_selected&#39;); 
        $(this).addClass(&#39;row_selected&#39;); 
      } 
  
      var aData = editor.fnGetData(this); 
      if (null != aData) { 
        putValue(aData); 
      } 
  
      $("#hiddenValue").val("edit"); 
      $("#e_Attributes").dialog("open"); 
  
    }); 
    //添加 
    $("#add").click(function () { 
      editor.$(&#39;tr.row_selected&#39;).removeClass(&#39;row_selected&#39;); 
      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", //是否开启垂直滚动，以及指定滚动区域大小,可设值：&#39;disabled&#39;,&#39;2000px&#39; 
//        "bSort": true, //开关，是否启用各列具有按列排序的功能 
//        "bSortClasses": true, 
//        "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 
//        "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：&#39;disabled&#39;,&#39;2000%&#39; 
//        "aaSorting": [[0, "asc"]], 
//        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 
//        "sDom": &#39;<"H"if>t<"F"if>&#39;, 
        "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(){
  $(&#39;#example&#39;).dataTable();
});

登入後複製

以上是jQuery插件datatables的用法及如何實現分頁程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

datatables jquery 如何

上一篇：jQuery datatables是什麼？ datatables如何使用？下一篇：js與jquery遍歷單元格內容實例程式碼詳解

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

php ob緩存介紹以及ob函數詳解

2023-03-07 21:36:01
MySQL使用cmd指令修改密碼的操作

1970-01-01 08:00:00
javascript如何操作cookie來實現使用者登入程式碼實例詳解

1970-01-01 08:00:00
什麼是php類別？ php類的屬性詳解

2023-03-11 13:22:01
javascript基本函數debounce、poll和once實例用法詳解

1970-01-01 08:00:00
php7函數，聲明，傳回值等新特性介紹

2023-03-11 15:08:02
php array_keys()如何取得陣列鍵名用法詳解

2023-03-12 07:44:02
php深入理解刷新緩衝區函數用法

2023-03-11 10:18:01
javascript如何使用函數和傳回值用法實例詳解

1970-01-01 08:00:00
介紹Django查詢資料庫時各種種類的排序

1970-01-01 08:00:00