Web-Frontend
js-Tutorial
Einführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen
Einführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen
DataTables ist ein jQuery-Tabellen-Plug-in. Dabei handelt es sich um ein hochflexibles Tool, das auf progressiven Verbesserungen basiert und erweiterte interaktive Steuerelemente und Unterstützung für jedes HTML-Formular hinzufügt.
Verwendung:
Schauen Sie sich zunächst den folgenden Code an:
<title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8">
Führen Sie JS- und CSS-Dateien ein der obige Code. Es kann in der Demo kopiert werden. Achten Sie auf die Pfadadresse.
Dann werfen wir einen Blick auf den folgenden Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>
</head>
<body id="dt_example">//此处为body的id
<p id="container" align="center">//*p 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<p id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</p>
</p>Das Obige kann den im Bild gezeigten Effekt erzeugen, Paging. Sortieren. usw.
Lassen Sie uns abschließend über jedes Attribut sprechen (hauptsächlich hinzugefügter Standort)
//$(document).ready(function() {
//$('#example').dataTable( {//加载
//"bPaginate": true,//分页按钮
//"bLengthChange": true,//每行显示记录数
//"bFilter": true,//搜索栏
//"bSort": true,//排序
//"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
//"bAutoWidth": true } );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aoColumns": [
// /* Engine */ null, //默认
// /* Browser */ null,
// /* Platform */ { "bSearchable": false, //不可参与搜索
// "bVisible": false },//不可见
// /* Version */ { "bVisible": false },//不可见
// /* Grade */ null
//] } );
//} );
//$(document).ready(function() {
//$('#example').dataTable({
//});
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - p elements* <"class" and > - p with a class * Examples: <"wrapper"flipt>, <lf<t>ip>
//} );
//} );
//$(document).ready(function() {
// $('#example').dataTable( {
// "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( { //分页信息 不是很难理解。
//"oLanguage": {
//"sLengthMenu": "Display _MENU_ records per page",
//"sZeroRecords": "Nothing found - sorry",
//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
//"sInfoEmtpy": "Showing 0 to 0 of 0 records",
//"sInfoFiltered": "(filtered from _MAX_ total records)"
//}
//} );
//} )
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
"sPaginationType": "full_numbers"
});
} );Die Standardsprache ist Englisch und kann es natürlich auch sein internationalisiert:
"sUrl": "/SSS/dataTables/de_DE.txt" Fügen Sie einfach eine internationalisierte Datei hinzu. Der Name kann beliebig sein, solange der Pfad korrekt ist. Der Inhalt der von mir geschriebenen Internationalisierungsdatei lautet wie folgt und kann zur Verwendung direkt in txt kopiert werden.
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}Das obige ist der detaillierte Inhalt vonEinführung in die Attribute von JQuery-Plug-In-Datentabellen und ausführliche Erläuterungen zum Erstellen von Paging- und Sortierbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Wie verwende ich die PUT-Anfragemethode in jQuery?
Feb 28, 2024 pm 03:12 PM
Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <
Was ist Dogecoin?
Apr 01, 2024 pm 04:46 PM
Dogecoin ist eine Kryptowährung, die auf Internet-Memes basiert, ohne feste Angebotsobergrenze, schnelle Transaktionszeiten, niedrige Transaktionsgebühren und eine große Meme-Community. Zu den Verwendungszwecken gehören kleine Transaktionen, Trinkgelder und wohltätige Spenden. Das unbegrenzte Angebot, die Marktvolatilität und der Status als Scherzmünze bringen jedoch auch Risiken und Bedenken mit sich. Was ist Dogecoin? Dogecoin ist eine Kryptowährung, die auf Internet-Memes und Witzen basiert. Ursprung und Geschichte: Dogecoin wurde im Dezember 2013 von zwei Software-Ingenieuren, Billy Markus und Jackson Palmer, erstellt. Inspiriert vom damals beliebten „Doge“-Meme, einem komischen Foto mit einem Shiba Inu mit gebrochenem Englisch. Funktionen und Vorteile: Unbegrenztes Angebot: Im Gegensatz zu anderen Kryptowährungen wie Bitcoin
Detaillierte Einführung in die Funktionen des Samsung S24ai
Jun 24, 2024 am 11:18 AM
2024 ist das erste Jahr der KI-Mobiltelefone. Dank der intelligenten KI-Technologie können unsere Mobiltelefone effizienter und bequemer genutzt werden. Kürzlich hat die zu Beginn des Jahres erschienene Galaxy S24-Serie ihr generatives KI-Erlebnis noch einmal verbessert. Werfen wir einen Blick auf die detaillierte Funktionseinführung unten. 1. Umfassende Stärkung der generativen KI. Die Samsung Galaxy S24-Serie hat durch die Stärkung der Galaxy AI viele intelligente Anwendungen hervorgebracht. Diese Funktionen sind tief in Samsung One UI6.1 integriert, sodass Benutzer jederzeit ein komfortables intelligentes Erlebnis erhalten Verbesserung der Leistung von Mobiltelefonen. Zu den Highlights der Galaxy S24-Serie gehört die Sofortsuchfunktion, die Nutzer einfach gedrückt halten müssen
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Feb 28, 2024 pm 05:42 PM
Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:
Einführung in die Online-Score-Checking-Plattform (bequemes und schnelles Tool zur Score-Abfrage)
Apr 30, 2024 pm 08:19 PM
Schnelle Abfragetools bieten mehr Komfort für Schüler und Eltern. Mit der Entwicklung des Internets bieten immer mehr Bildungseinrichtungen und Schulen Online-Dienste zur Punkteüberprüfung an. Damit Sie den schulischen Fortschritt Ihres Kindes leicht verfolgen können, werden in diesem Artikel einige häufig verwendete Online-Plattformen zur Notenüberprüfung vorgestellt. 1. Bequemlichkeit – Eltern können die Testergebnisse ihrer Kinder jederzeit und überall über die Online-Ergebnisprüfungsplattform überprüfen. Eltern können die Testergebnisse ihrer Kinder jederzeit bequem überprüfen, indem sie sich auf einem Computer oder Mobiltelefon bei der entsprechenden Online-Ergebnisprüfungsplattform anmelden. Solange eine Internetverbindung besteht, sei es am Arbeitsplatz oder beim Ausgehen, können Eltern den Lernstand ihrer Kinder verfolgen und ihre Kinder gezielt beraten und unterstützen. 2. Mehrere Funktionen – zusätzlich zur Notenabfrage stehen auch Informationen wie Kurspläne und Prüfungstermine zur Verfügung.
Einführung in die achte Farbwaffe von Neon Abyss
Mar 31, 2024 pm 03:51 PM
Die achte Farbe ist eine Waffe in Neon Abyss. Viele Spieler möchten etwas über die Ballistik der achten Farbe der Waffe wissen und wissen, wie man mit der Waffenstärke spielt. Werfen wir also einen Blick auf die detaillierte Anleitung zur Flugbahn, Waffenstärke und dem Waffen-Gameplay der achten Farbe von Neon Abyss. Neon Abyss Color 8 Detaillierte Anleitung Waffeneinführung: Die Geheimwaffe des Zauberers! Waffenangriffsgeschwindigkeit: Normal Waffenstärke: Mäßig Waffenspiel: Die Angriffsmethode der achten Farbe besteht aus drei Einzelzielangriffen und dem anschließenden Abfeuern eines Strahls. Ballistische Darstellung:
Einführung in die Fähigkeiten und Eigenschaften von Hua Yishan Heart of the Moon Lu Shu
Mar 23, 2024 pm 05:30 PM
In Hua Yishan Heart Moon ist Lu Shu ein SSR-Star. Er ist als Single-Target-Backline-Spieler positioniert und verfügt über eine sehr beeindruckende kritische Trefferquote. Hier ist, was ich Ihnen mitgebracht habe Schauen Sie sich die Einführung in die Fähigkeiten und Eigenschaften von Hua Yishan Heart of the Moon Lu Shu an. Berühmtheitsmerkmale Berühmtheitsfähigkeiten 1. Lu Ming Shuzhong Fähigkeitsbeschreibung: Lu Shu wurde in Qiongqihui in Shuzhong geboren. Er praktiziert seit seiner Kindheit Kampfkunst und verfügt über herausragende Kampfkunstfähigkeiten. Verursacht Grundangriffsschaden in Höhe von 100 % der Angriffskraft des Gegners in der hinteren Reihe und verringert die Wut des Ziels um 10 Punkte. Fertigkeitsattribute: Stufe 2: Der Grundangriffsschaden wurde auf 105 % erhöht. Stufe 2: Der Grundangriffsschaden wird auf 110 % erhöht und die Wut des Ziels wird um 15 Punkte verringert. Stufe 2: Der Schaden des Basisangriffs wurde auf 115 % erhöht. Stufe 2: Der Grundangriffsschaden wird auf 120 % erhöht und die Wut des Ziels wird um 20 Punkte verringert. Level 2: Basisangriff
