Detaillierte Erläuterung der Verwendung von jQuery-Plug-in-Datentabellen und der Implementierung von Paging-Code-js-Tutorial-php.cn

DataTables ist ein jQuery-Tabellen-Plug-in.

Erklärung mit Beispielen

1. Anforderungen: Wie in der Abbildung unten gezeigt, den Inhalt von Datentabellen hinzufügen, bearbeiten und löschen.

2. Analyse: Funktion hinzufügen – klicken Sie auf die Schaltfläche „Hinzufügen“, um ein Dialogfeld zum Hinzufügen neuer Inhalte zu öffnen.
Bearbeitungsfunktion: Klicken Sie auf „Datentabellen“, um eine Zeile auszuwählen. Dies bedeutet, dass sie ausgewählt wurde. Klicken Sie auf die Schaltfläche „Bearbeiten“, um den Inhalt der von uns ausgewählten Zeile anzuzeigen . Wenn keine Zeile ausgewählt ist und auf die Schaltfläche „Bearbeiten“ geklickt wird, wird das Dialogfeld nicht angezeigt. Wenn auf eine Zeile in Datentabellen doppelgeklickt wird, wird auch ein Dialogfeld angezeigt, und die Farbe der doppelgeklickten Zeile ändert sich. Der Inhalt des Dialogfelds ist der Inhalt der Zeile, auf die wir doppelgeklickt haben.
Löschfunktion: Klicken Sie auf Datentabellen, um eine Zeile auszuwählen, klicken Sie auf die Schaltfläche „Löschen“. Daraufhin wird ein Warnfeld angezeigt, in dem Sie gefragt werden, ob der ausgewählte Inhalt gelöscht werden soll. Wenn nichts ausgewählt ist, wird beim Klicken auf die Schaltfläche „Löschen“ kein Warnfeld angezeigt und der Inhalt wird nicht gelöscht.
3. Codierung:
Attribute//Name

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

Nach dem Login kopieren

Beschreibung des obigen Codes: Dieser Code ist hauptsächlich in zwei Teile unterteilt. Ein Teil ist die Deklaration von JQuery-Datentabellen,

; der zweite Teil ist die Deklaration des Dialogs und der für die Operation erforderlichen Aktionen Technologie ohne Seitenaktualisierung. Erforderlicher JS-Code:

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

Nach dem Login kopieren

Die obige Codebeschreibung: Dieser Code ist die Dialogdeklaration, und die Deklaration von Datentabellen erfolgt in der Form add, bearbeiten, löschen.

4. Paging-Implementierung

Einführung in CSS-Dateien und JS-Dateien

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

Nach dem Login kopieren

Für dataTables die Das Formular muss durch thead und tbody beschrieben werden, wie unten gezeigt:

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

Nach dem Login kopieren

Wenn kein thead vorhanden ist, wird ein Fehler gemeldet.

bPaginate: Ob paginiert werden soll, der Standardwert ist true, Paginierung
iDisplayLength: Anzahl der Zeilen pro Seite, Standardanzahl pro Seite: 10
sPaginationType: Paginierungsstil, unterstützt zwei Builds -in Methoden, two_button und full_numbers, two_button wird standardmäßig verwendet.
bLengthChange: Gibt an, ob der Benutzer die Anzahl der Zeilen pro Seite nach der Paginierung über eine Dropdown-Liste auswählen kann. Die Anzahl der Reihen beträgt 10, 25, 50, 100. Diese Einstellung erfordert bPaginate-Unterstützung. Der Standardwert ist „true“.
bFilter: Datenfilterung aktivieren oder deaktivieren, Standardwert ist „true“. Beachten Sie, dass Sie sDom
bInfo:allow verwenden sollten, wenn Sie die Filterfunktion verwenden, aber das standardmäßige Filtereingabefeld deaktivieren möchten oder verbieten Tabelleninformationen Die Anzeige, der Standardwert ist wahr, zeigt Informationen an.

Die einfachste Art, es zu verwenden, ist die Nullkonfiguration.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jQuery-Plug-in-Datentabellen und der Implementierung von Paging-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

datatables jquery 如何

Quelle：php.cn

Vorheriger Artikel：Was sind jQuery-Datentabellen? Wie verwende ich Datentabellen? Nächster Artikel：Detaillierte Erläuterung des Beispielcodes zum Durchlaufen von Zellinhalten mit js und jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Einführung in den PHP-OB-Cache und detaillierte Erläuterung der OB-Funktion

2023-03-07 21:36:01
So ändern Sie das Passwort in MySQL mit dem Befehl cmd

1970-01-01 08:00:00
Detaillierte Erläuterung, wie Javascript Cookies verwaltet, um Beispiele für Benutzeranmeldecodes zu implementieren

1970-01-01 08:00:00
Was sind PHP-Klassen? Detaillierte Erläuterung der Attribute der PHP-Klasse

2023-03-11 13:22:01
Detaillierte Erläuterung der Verwendung der grundlegenden JavaScript-Funktionen Debounce, Poll und Once-Instanzen

1970-01-01 08:00:00
Einführung in neue Funktionen wie PHP7-Funktionen, Deklarationen, Rückgabewerte usw.

2023-03-11 15:08:02
Ausführliche Erklärung, wie man den Array-Schlüsselnamen mit PHP array_keys() erhält

2023-03-12 07:44:02
PHP ist mit der Verwendung der Aktualisierungspufferfunktion bestens vertraut

2023-03-11 10:18:01
Ausführliche Erklärung, wie Javascript Funktionen verwendet, und Beispiele für die Verwendung von Rückgabewerten

1970-01-01 08:00:00
Einführung verschiedener Sortierarten, wenn Django die Datenbank abfragt

1970-01-01 08:00:00

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1765

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1905

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1624

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

1531

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

1570

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1416497
php入门教程之一周学会PHP

4256896
JAVA 初级入门视频教程

2472934
小甲鱼零基础入门学习Python视频教程

503155
PHP 零基础入门教程

843828

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage

Über uns Haftungsausschluss Sitemap: Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Detaillierte Erläuterung der Verwendung von jQuery-Plug-in-Datentabellen und der Implementierung von Paging-Code