Ich verwende jQuery DataTables .
Ich möchte die Suchleiste und Fußzeile (die anzeigt, wie viele Zeilen sichtbar sind) entfernen, die standardmäßig zur Tabelle hinzugefügt werden. Ich möchte dieses Plugin im Grunde nur zum Sortieren verwenden. Kann das gemacht werden?
jquery
html
datatables
Leora
quelle
quelle
sDom
wie hier beschrieben effizient nutzen - stackoverflow.com/a/53885264/5729813Antworten:
Verwenden Sie für DataTables> = 1.10 :
Verwenden Sie für DataTables <1.10 :
oder mit reinem CSS:
quelle
paging:false
undinfo:false
nicht nurpaging:false
Unter http://www.datatables.net/examples/basic_init/filter_only.html finden Sie eine Liste der Funktionen, die angezeigt / ausgeblendet werden sollen.
Sie möchten "bFilter" und "bInfo" auf false setzen.
quelle
{paging: false, info: false}
Sie können die Kopf- oder Fußzeile auch überhaupt nicht zeichnen, indem Sie Folgendes festlegen
sDom
: http://datatables.net/usage/options#sDomzeigt NUR die Tabelle an, keine Kopf- oder Fußzeilen oder irgendetwas.
Einige davon werden hier besprochen: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1
quelle
dom
Eigenschaft mit einem Wert vonltipr
see datatables.net/reference/option/domWenn Sie einen benutzerdefinierten Filter verwenden, möchten Sie möglicherweise das Suchfeld ausblenden, aber dennoch die Filterfunktion aktivieren. Dies ist also
bFilter: false
nicht der Fall. Verwenden Siedom: 'lrtp'
stattdessen standardmäßig'lfrtip'
. Dokumentation: https://datatables.net/reference/option/domquelle
quelle
Eine schnelle und schmutzige Möglichkeit besteht darin, die Klasse der Fußzeile herauszufinden und sie mit jQuery oder CSS auszublenden:
quelle
wenn Sie themeroller verwenden:
quelle
Wie von @Scott gesagt, ist Stafford
sDOM
die am besten geeignete Eigenschaft, um die Elemente, aus denen die DataTables bestehen, anzuzeigen, auszublenden oder zu verschieben. Ich denke dassDOM
ist jetzt veraltet, mit dem eigentlichen Patch ist diese Eigenschaft jetztdom
.Mit dieser Eigenschaft können Sie auch eine Klasse oder ID für ein Element festlegen, um die Gestaltung zu vereinfachen.
Überprüfen Sie die offizielle Dokumentation hier: https://datatables.net/reference/option/dom
Dieses Beispiel würde nur die Tabelle zeigen:
quelle
in Ihrem datierbaren Konstruktor
https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box
quelle
Hier können Sie
sDom
Ihrem Code ein Element hinzufügen. Die obere Suchleiste ist ausgeblendet.quelle
Dies kann durch einfaches Ändern der Konfiguration erfolgen:
Aber um die leere Fußzeile zu verstecken; Dieser Code macht den Trick:
quelle
Nur zur Erinnerung, Sie können nicht zweimal
DataTable
dasselbe<table>
Element initialisieren .Wenn Sie gleiches Problem auftreten , dann können Sie einstellen ,
searching
undpaging
falsch , während Datentabelle auf Ihrem HTML Initialisierung<table>
wie folgt ausquelle
Sie könnten sie über CSS verstecken:
quelle
Sie können das sDom-Attribut verwenden. Code sieht ungefähr so aus.
Es versteckt Such- und Pager-Box.
quelle
- dataTables-Dokumentation: HTML5-Daten- * Attribute - Tabellenoptionen
So können Sie
data-searching="false" data-paging="false" data-info="false"
auf dem angebentable
. In dieser Tabelle ist es beispielsweise nicht möglich, zu suchen, Paging anzuwenden oder den Informationsblock anzuzeigen:Sehen Sie ein funktionierendes Beispiel bei https://jsfiddle.net/jhfrench/17v94f2s/ .
Der Vorteil dieses Ansatzes besteht darin, dass Sie einen Standardaufruf für dataTables (dh
$('table.apply_dataTables').DataTable()
) ausführen können , während Sie die dataTables-Optionen tabellenweise konfigurieren können.quelle
Ich habe dies getan, indem ich der Fußzeile eine ID zugewiesen und dann mit CSS gestylt habe:
dann Styling mit CSS:
Wie oben erwähnt, funktionieren die Wege bei mir nicht.
quelle
Ich denke, der einfachste Weg ist:
Sie können nur die Tabelle bearbeiten, die Sie ändern müssen, ohne das allgemeine CSS oder JS zu ändern.
quelle
Wenn Sie das Suchformular nur ausblenden möchten, z. B. weil Sie Spalteneingabefilter haben oder weil Sie bereits über ein CMS-Suchformular verfügen, das Ergebnisse aus der Tabelle zurückgeben kann, müssen Sie nur das Formular überprüfen und seine ID abrufen. (Zum Zeitpunkt des Schreibens sieht es so aus
[tableid]-table_filter.dataTables_filter
).[tableid]-table_filter.dataTables_filter{display:none;}
Behalten Sie dann einfach alle anderen Funktionen von Datentabellen bei.quelle