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>
$(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+'"/>';
}
}
]
});
*: 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+'"/>';
}
}
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.
