suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Datentabellen des jQuery-Tabellen-Plug-ins „usage_jquery'.

Zusammenfassung der Datentabellen des jQuery-Tabellen-Plug-ins „usage_jquery'.

WBOY
WBOYOriginal
2016-05-16 15:07:351295Durchsuche

DataTables ist ein jQuery-Tabellen-Plug-in. In diesem Artikel erfahren Sie, wie Sie die Tabellen-Plug-in-Datentabellen verwenden. Der spezifische Inhalt ist wie folgt

1. Initialisierung Auf der Seite 

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" class="display">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Row 1 Data 1</td>
   <td>Row 1 Data 2</td>
  </tr>
  <tr>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</td>
  </tr>
 </tbody>
</table>
 </body>
</html>
Initialisierung in js

$(document).ready( function () {
 $('#table_id').DataTable();
} );

2. Allgemeine Konfigurationen Während der Initialisierung können Sie die Tabelle über einige häufig verwendete Konfigurationselemente konfigurieren. Dies ist, was ich tatsächlich im Projekt verwendet habe 

$("#vivo_table_list").dataTable({
   pageLength: 10,  //更改初始页面长度 （每页的行数）
   processing: true, //显示正在处理字符串
   serverSide: false, // 服务器模式，这一点非常奇怪*
   ordering: true,   // 是否启用Datatables排序
   searching: false,  // 开启搜索
   autoWidth: false,
   zeroRecords: "没有查询数据",
   destroy: true,   // 从当前上下文销毁掉Datatables对象 (妹搞懂)
   pagingType: "input", // 分页按钮种类显示选项
   language: {
    url: "cn.txt" // 本地化
   },
   dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
   ajax: {
    url: "/url",
    type: "post", // ajax请求的类型 **
    data: function () {
     return that.getQueryParams(); // ajax的参数
    }
   },
   columns: [
    {title: "id", data: "id", orderable: true},
    {title: "uid", data: "uid", orderable: false},
    {title: "昵称", data: "nick", orderable: false},
    {title: "姓名", data: "name", orderable: false},
    {title: "电话", data: "tel", orderable: false},
    {title: "申请时间", data: "stimeshow", orderable: true},
    {title: "状态", data: "statshow", orderable: false},
    {
     title: "操作", orderable: false, render: function (data,type,full) {
     return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="hidden" value="'+full.id+'"/>';
    }
    }
   ]
  });
Die vom Hintergrund zurückgegebenen Daten müssen eine Karte sein, der Schlüssel ist „Daten“ und der Wert sind die Daten (wenn die Daten eine Liste sind, ist toArray() erforderlich), wobei Daten auch einer der Parameter sind von DataTables, die die in der Tabelle anzuzeigenden Daten angeben, sodass Sie andere Tabellenparameter in diese Karte einfügen können, indem Sie einfach den Schlüssel auf den Parameternamen setzen.

*: In der Konfiguration aktiviert serverSide den Servermodus. Während der Arbeit werden die Daten der Tabelle aus dem Hintergrund über Ajax abgerufen, sodass dieser Modus aktiviert ist Natürlich, aber die Tabelle ist sicher. Die Funktion zum Sortieren nach einer Spalte war deaktiviert. Dann habe ich diesen Modus ausgeschaltet und festgestellt, dass ich die Spalten in der Tabelle sortieren konnte und die Daten in der Tabelle immer noch erhalten wurden vom Server... Dieser Modus muss also noch untersucht werden

**: Im Projekt sind die vom Hintergrundcontroller empfangenen Parameter Arrays. Wenn die Ajax-Anfrage komplexe Parameter enthält, muss der Anforderungstyp post sein

3. Erweiterte Funktionen

1. Versteckte Spalten Sie können über das Attribut „columns.visible“ festlegen, ob die Spalte angezeigt wird, aber auf diese Weise können Sie den Wert dieser Spalte nicht abrufen. Wenn Sie die ID-Spalte ausblenden und ein Ereignis basierend auf der ID auslösen möchten, ist dies nicht möglich Mach es = =. Später, nachdem ich die API überprüft hatte, kam mir die Lösung, das columns.render-Attribut zu verwenden: 

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}
Beachten Sie, dass die Funktion nach dem Rendern drei Parameter hat: data/type/full, wobei der vollständige Parameter alle Daten in der Zeile sind (auf der offiziellen Website heißt es hier: nur die Daten in der Zeile, nicht der Wert der Daten). Attribut, also auch wenn die Daten in Es gibt den gewünschten Wert, aber Sie können ihn nicht erhalten, wenn Sie ihm keine Spalte zuweisen. Wenn Sie möchten, können Sie den Wert, den Sie ausblenden möchten, direkt verwenden Um diesen Wert außerhalb der Tabelle zu referenzieren, können Sie einen versteckten < in render ;input> zusammenstellen. Er kann extern abgerufen werden, aber diese Methode ist wirklich dumm. Wenn Sie eine gute Methode haben, sagen Sie es mir bitte.

2. Geben Sie die Seitenzahl ein, um zur Seite zu springen

Wir können den Stil der Tabellen-Page-Schaltfläche über das pagingType-Attribut festlegen, aber einige Standardstile von DataTables verfügen nicht über den Stil, um die im Projekt erforderliche Seitennummer einzugeben, um zu springen. Auf der Plug-In-Seite der offiziellen Website werden jedoch mehrere Paging-Button-Plug-Ins eingeführt. Darunter kann das Eingabe-Paging-Plug-In unsere Anforderungen erfüllen. Führen Sie einfach die js des Plug-Ins ein und ändern Sie den Wert von pagingType zur „Eingabe“. Der CDN der js-Dateien lautet:


//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Offizielle Website von DataTables

Stellungnahme：
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
Vorheriger Artikel：JQuery-Karusselleffekt-Implementierungsprozess Analyse_JQueryNächster Artikel：JQuery-Karusselleffekt-Implementierungsprozess Analyse_JQuery

In Verbindung stehende Artikel

Mehr sehen