jQuery 플러그인 데이터 테이블 사용법과 페이징 코드 구현 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

DataTables는 jQuery 테이블 플러그인입니다.

예제를 통한 설명

1. 요구 사항: 아래 그림과 같이 데이터 테이블의 내용을 추가, 편집, 삭제합니다.

2. 분석: 기능 추가---추가 버튼을 클릭하면 새 콘텐츠를 추가할 수 있는 대화 상자가 나타납니다. ㅋㅋㅋ 선택 항목이 없습니다. 행을 선택하지 않고 편집 버튼을 클릭하면 대화 상자가 팝업되지 않습니다. 데이터 테이블의 행을 두 번 클릭하면 대화 상자도 나타나고 두 번 클릭한 행의 색상이 변경됩니다. 대화 상자의 내용은 두 번 클릭한 행의 내용입니다. ㅋㅋㅋ > 삭제할 수 없습니다. 아무것도 선택하지 않은 경우, 삭제 버튼을 클릭해도 경고창이 뜨지 않으며 해당 내용도 삭제되지 않습니다.
3. 코딩:
속성//이름

 <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 데이터 테이블의 선언, ; 두 번째 부분은 대화 상자 선언과 작업에 필요한 작업입니다. 이 부분의 작업은 ajax non-refresh 페이지 기술을 선택합니다. 필수 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 = $(&#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>

로그인 후 복사

위 코드 설명: 이 코드는 대화 상자의 선언이며, 데이터 테이블의 선언은 추가, 편집, 삭제로 작동됩니다.

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
s페이지 매김 유형: 페이지 매김 스타일은 두 개의 내장 메소드인 two_button 및 full_numbers를 지원하며 기본적으로 two_button을 사용합니다.
bLengthChange: 사용자가 드롭다운 목록을 통해 페이지 매김 후 페이지당 행 수를 선택할 수 있는지 여부. 행 수는 10, 25, 50, 100입니다. 이 설정에는 bPaginate 지원이 필요합니다. 기본값은 true입니다.
bFilter: 데이터 필터링을 활성화 또는 비활성화합니다. 기본값은 true입니다. 필터링 기능을 사용하지만 기본 필터링 입력 상자를 끄려면 sDom
bInfo를 사용해야 합니다. 테이블 정보 표시를 허용하거나 비활성화하려면 기본값은 true입니다. 정보 표시 .