Wie bekomme ich Export-Schaltflächen, Datensätze pro Seite und Textbox in einer einzigen horizontalen Zeile in jQuery-Datatabellen

Question

Hallo bin ich mit jQuery-Databases.

Ich möchte alle Export-Schaltflächen, Datensätze pro Seite und Textbox in einer einzigen Zeile über der Tabelle etwas wie unten gezeigt.

Aber ich bin immer den unten Ausgang: -

I unten Funktion bin mit: -

$(".mydataTable").dataTable({ 
       "pagingType": "full_numbers", 
       "iDisplayLength": 5, 
       bJQueryUI: true, 
       "aLengthMenu": [[-1, 5, 10, 20, 50], ["All", 5, 10, 20, 50]], 
       dom: 'Bflit',     
       buttons: [ 
        'copyHtml5', 
        'excelHtml5', 
        'csvHtml5', 
        'pdfHtml5' 
       ] 
      }); 

Was der dom Option für gewünschtes Ergebnis sein sollte ?

Answer 1

Angenommen, Sie sind mit Bootstrap (die aus dem Screenshot sieht es aus wie du bist), versuchen Sie diese dom Option aus:

dom:"<'row'<'col-sm-6'b><'col-sm-6'l><'col-sm-6'f>>" + 
    "<'row'<'col-sm-12'tr>>" + 
    "<'row'<'col-sm-5'i><'col-sm-7'p>>" 

Verwenden Sie die Datentabellen dom Dokumentation here gefunden (auch von Pranav in den Kommentaren gepostet Ihrer Frage), um mehr Informationen zu erhalten, wenn Sie Dinge genau positionieren möchten. Dies sollte jedoch Schaltflächen in der gleichen Zeile wie die Suche und Datensätze pro Seite Elemente setzen.

Answer 2

Es gibt eine Alternative, wenn Sie interessiert sind, überprüfen Sie den folgenden Code.

$(document).ready(function() { 
    $('#example').DataTable({ 
    dom: 'Bfrtip', 
    lengthMenu: [ 
     [ 10, 25, 50, -1 ], 
     [ '10 rows', '25 rows', '50 rows', 'Show all' ] 
    ], 
    buttons: [ 
     'pageLength' 
    ] 
    }); 
}); 

können Sie überprüfen die Referenz here