2017-11-20 4 views
1

Ich verwende eine einfache Tabelle in Verbindung mit datatable.js.Datat Komponente nicht richtig ausgerichtet

Wenn ich 6 oder 7 Spalten habe kein Problem. Die Suche und der Paginator werden korrekt ausgerichtet, aber mit 3 oder 4 Spalten wird sie in drei Spalten angezeigt.

In https://datatables.net/examples/basic_init/dom.html zeigen, wie richtig diese konfigurieren, aber ich bin mit thymeleaf und beschwert sich über die Syntax

UPDATE 1

Ich habe meine Frage in: https://datatables.net/forums/discussion/45926/dom-in-thymeleaf-html-pages

und das ist dieser Beitrag:

Der Versuch, den Code hinzufügen: https://datatables.net/examples/basic_init/dom.html

in einer thymeleaf HTML-Seite, aber es beschwert sich über diesen Code:

"dom": '<"top"i>rt<"bottom"flp><"clear">' 

Ich habe versucht, "durch" und Escape-Zeichen verwenden zu ändern, aber auf keinen Fall.

Dieses Skript in meiner HTML-Seite, nicht funktioniert:

$(document).ready(function() { 
    $("#mensuales").DataTable({ 
     "dom": '<"top"i>rt<"bottom"flp><"clear">', 
     "language": { 
      "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json" 
     }, 
     "lenghtMenu": [ 
      [5, 12, 15, 20, -1], 
      [5, 12, 15, 20, "Todos"] 
     ], 
     "ordering": true, 
     stateSave: true 
    }); 
}); 

Allan sagt der Code korrekt ist, aber ich nicht in der Lage sein, in meinen Seiten zu verwenden.

UPDATE 2

enter image description here Irgendwelche Vorschläge?

Dank

+0

Sie einen Tippfehler haben: 'lenghtMenu' – isherwood

Antwort

1

Versuchen mit:

<script type="text/javascript" th:inline="javascript"> 
    /*<![CDATA[*/ 
    $(document).ready(function() { 
     $("#mensuales").DataTable({ 
     "dom": '<"top"i>rt<"bottom"flp><"clear">', 
     "language": { 
      "url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json" 
     }, 
     "lenghtMenu": [ 
      [5, 12, 15, 20, -1], 
      [5, 12, 15, 20, "Todos"] 
     ], 
     "ordering": true, 
     stateSave: true 
     }); 
    }); 
    /*]]>*/ 
</script> 
Verwandte Themen