Datatable component not aligned properly

Question

I'm using a simple table in conjunction with datatable.js.

If I have 6 or 7 columns no problem. The search and paginator align correctly, but with 3 or 4 columns it shows in three columns.

In https://datatables.net/examples/basic_init/dom.html show how to properly configure this, but I'm using thymeleaf and complains about the syntax

UPDATE 1

I have posted my question in: https://datatables.net/forums/discussion/45926/dom-in-thymeleaf-html-pages

and this is that post:

Trying to add the code in: https://datatables.net/examples/basic_init/dom.html

in a thymeleaf html page, but it complains about this code:

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

I tried to change " by ' and use escape characters but no way.

This script in my html page, doesnt work:

$(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 says the code is correct, but I not be able to use in my pages.

UPDATE 2

Any suggestions?

Thanks

Answer 1

Try with:

<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>