Explication détaillée de l'utilisation des tables de données du plug-in jQuery et comment implémenter le code de pagination

DataTables est un plug-in de table jQuery.

Explication avec des exemples

1. Exigences : comme le montre la figure ci-dessous, ajoutez, modifiez et supprimez le contenu des tables de données.

2. Analyse : Ajouter une fonction --- cliquez sur le bouton Ajouter pour faire apparaître une boîte de dialogue permettant d'ajouter un nouveau contenu.
Fonction d'édition --- Cliquez sur les tables de données pour sélectionner une ligne. La ligne change de couleur, ce qui signifie qu'elle a été sélectionnée. Cliquez sur le bouton d'édition pour afficher la boîte de dialogue. Le contenu de cette boîte de dialogue est le contenu de la ligne que nous avons sélectionnée. . Si aucune ligne n'est sélectionnée et que vous cliquez sur le bouton Modifier, la boîte de dialogue ne s'affichera pas. Lorsqu'on double-clique sur une ligne des tables de données, une boîte de dialogue apparaît également et la couleur de la ligne sur laquelle nous avons double-cliqué change. Le contenu de la boîte de dialogue est le contenu de la ligne sur laquelle nous avons double-cliqué.
Fonction Supprimer --- cliquez sur les tables de données pour sélectionner une ligne, cliquez sur le bouton Supprimer et une boîte d'avertissement apparaîtra pour vous demander si vous souhaitez supprimer le contenu sélectionné. Lorsque rien n'est sélectionné, cliquer sur le bouton Supprimer ne fera pas apparaître de boîte d'avertissement et le contenu ne sera pas supprimé.
3. Codage :
Attributs//Nom

 <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>

Description du code ci-dessus : Ce code est principalement divisé en deux parties. Une partie est la déclaration des tables de données jquery, 7255ed4a65b8a0103bb60d0ff43be0fe; la deuxième partie est la déclaration de la boîte de dialogue et des actions requises pour l'opération. Cette partie de l'opération sélectionne l'ajax. technologie de page sans actualisation. Code js requis :

<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>

La description du code ci-dessus : Ce code est la déclaration de dialogue, et la déclaration des tables de données est sous forme d'ajout, modifier, supprimer fonctionner.

4. Implémentation de la pagination

Présentation des fichiers CSS et des fichiers 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>

Pour dataTables , le Le formulaire doit être décrit via le tête et le corps, comme indiqué ci-dessous,

<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>

S'il n'y a pas de tête, une erreur sera signalée.

• bPaginate : s'il faut paginer, la valeur par défaut est vraie, pagination

• iDisplayLength : Nombre de lignes par page, nombre par défaut par page : 10

• sPaginationType : Style de pagination, prend en charge deux -in méthodes, two_button et full_numbers, two_button est utilisé par défaut.

• bLengthChange : s'il faut permettre à l'utilisateur de sélectionner le nombre de lignes par page après la pagination via une liste déroulante. Le nombre de lignes est de 10, 25, 50, 100. Ce paramètre nécessite la prise en charge de bPaginate. La valeur par défaut est vrai.

• bFilter : Activer ou désactiver le filtrage des données, la valeur par défaut est vraie. Notez que si vous utilisez la fonction de filtrage mais souhaitez désactiver la zone de saisie de filtrage par défaut, vous devez utiliser sDom

• bInfo : autoriser ou interdire les informations du tableau L'affichage, la valeur par défaut est vrai, affiche des informations.

La façon la plus simple de l'utiliser est la zéro configuration.

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable();
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!