Bootstrap 4 - Table - Pagination

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

bs4

Neues Mitglied
15 September 2019
6
0
1
33
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
 

bs4

Neues Mitglied
15 September 2019
6
0
1
33
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

Aktives Mitglied
26 November 2017
983
102
43
38
Minden
sebastian1012.bplaced.net
Dann kuck dir mein Codepen von mir an . Ist ältes Script und wurde für Greasmonkey 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 drinne oder so ?

Bei mir zeigt er Suche und Pagniton an und das andere ist weg
https://codepen.io/basti1012/pen/MXOxrv


Oder verstehe ich das irgendwie falsch was du meinst ?
 

bs4

Neues Mitglied
15 September 2019
6
0
1
33
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

Aktives Mitglied
26 November 2017
983
102
43
38
Minden
sebastian1012.bplaced.net
Jo kuck noch mal
habe das dazu gegeben bei Javascript
Code:
     "language": {
               "search":"",
               },
und die Css hat das bekommen
Code:
#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

Neues Mitglied
15 September 2019
6
0
1
33
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

Aktives Mitglied
26 November 2017
983
102
43
38
Minden
sebastian1012.bplaced.net
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

Neues Mitglied
15 September 2019
6
0
1
33
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.
 
Werbung: