Bootstrap 4 - Table - Pagination

[bs4]

Hi!

Ich hoffe Ihr könnt mir helfen.

Ich habe eine BS4 Tabelle mit SEARCH und PAGINATION erstellt.

Über der Tabelle neben der Suche kann man über "SHOW ME 10 oder 25 oder 50 oder 100 ENTRIES" die Anzahl der Treffer pro Seite definieren.

Unter der Tabelle kann man die Tabelle nach Seiten durchklicken 1,2 3 usw.

Mit diesem code kann ich BEIDES auf einmal ausblenden.

// Basic example
$(document).ready(function () {
$('#xxx').DataTable({
"paging": false // false to disable search (or any other option)
});
$('.dataTables_length').addClass('bs-select');
});

Ich möchte aber NUR "SHOW ME 10 oder 25 oder 50 oder 100 ENTRIES" oben ausblenden und die PAGINATION unter der Tabelle BEHALTEN.

Geht das? Wenn dann wie?

Vielen Dank für eure Hilfe

 

[basti1012]

Dann probier es mal so

    $('#xxx').DataTable({
     "info":     false
    });

 

[bs4]

Danke für die schnelle Antwort.

Wenn ich den Code nutze, ist nicht nur ENTRIES weg, sondern AUCH Pagination UND Search, also eigentlich bleibt nur die Tabelle übrig.

Um ALLE diese Dinge anzuzeigen nutze ich aktuell:

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

 

[basti1012]

Dann guck dir mein Codepen von mir an . Ist älteres Script und wurde für Greasemonkey geschrieben , aber es geht ja nur um Datatables.
Wenn du nur den Code nimmst, den ich eben gepostet habe, dann zeigt er das auch so an.
Hast du da noch anderen Code drinnen oder so?

Bei mir zeigt er Suche und Pagniton an und das andere ist weg

https://basti1012.bplaced.net/index.php?ordner=html&id=697

Oder verstehe ich das irgendwie falsch, was du meinst?

 

[bs4]

Wenn ich https://codepen.io/basti1012/pen/MXOxrv aufrufe steht bei mir oben links "Show 10 entries".

Und genau das bzw. nur das soll ausgeblendet werden.

 

[basti1012]

Ach das meinst du
Dann kuck jezt noch mal weil ich habe
"lengthChange": false, dazu gegeben

 

[bs4]

Jetzt geht es! Danke!

Hast Du noch eine Idee mit welchem Code man das Suchfeld länger macht, in die Mitte über der Tabelle packt und das "Search:" davor ausblendet?

 

[basti1012]

Jo kuck noch mal
habe das dazu gegeben bei Javascript

     "language": {
               "search":"",
               },

und die Css hat das bekommen

#example_filter {
    float: none;
    text-align: center;
}
.dataTables_wrapper .dataTables_filter input {
    width: 300px;
}

kuck mal ob das bei dir auch geht , wenn ja dann ist ja gut. Jetzt wo ich mal die Manual da durchgegangen bin , habe ich erstmal gesehen was datatables alles für Einstellungen hat. Ist ja voll fett

 

[bs4]

Hi,

ich habe Deine beiden Zusatzcodes bei mir integriert, aber je nachdem wie es es gemacht habe, geht dann wieder was anderes nicht.

Ich nutze das hier als Komplettpaket https://datatables.net/examples/styling/bootstrap4.html

Außerdem komme ich mit codepen nicht klar.

Ich habe meinen code mal hier gespeichert: https://www.w3schools.com/code/tryit.asp?filename=G82MATWFT60F

Eventuell könntest Du den Code anpassen, bei https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default einfügen, speichern und mir den link schicken.

Danke

 

[basti1012]

Wie soll das den jetzt aussehen zum Schluss ? , so ?
https://www.w3schools.com/code/tryit.asp?filename=G82TD50MAM2N

Ich habe da aber den ganzen eingebunden Müll der jetzt nix damit zu tun hat rausgeworfen, weil die ganzen Error Meldungen nerven.
Die Css die ich dazu geschrieben habe funktioniert zwar , aber da es Bootstrap ist geht es auch vieleicht anders. Nur ich hasse Bootstrap und werde es auch nicht versuchen zu lernen, deshalb kann ich bei Bootstrap auch nicht richtig helfen

Komisch ist es auch , wenn man oben inks die Informationen ausblendet , nimmr der Container trotzdem noch den Platz ein. Deshalb ist das schon blöd gemacht und läst das Suchfeld nicht so einfach verschieben wie ich es erst gedacht habe

 

[bs4]

Perfekt. Vielen, vielen Dank.

Also es muss nicht bs4 sein, es gefiel mir nur vom Design am besten.

Also wenn du noch einen andere Lösung hast, würde ich mich freuen.