数据表组件未正确对齐

Question

我将一个简单的表格与datatable.js 结合使用。

如果我有 6 或 7 列没问题。搜索和分页器正确对齐，但有 3 或 4 列显示在三列中。

在https://datatables.net/examples/basic_init/dom.html 展示如何正确配置它，但我正在使用 thymeleaf 并抱怨语法

更新 1

我已将我的问题发布在： https://datatables.net/forums/discussion/45926/dom-in-thymeleaf-html-pages

这就是那个帖子：

尝试将代码添加到：https://datatables.net/examples/basic_init/dom.html

在 thymeleaf html 页面中，但它抱怨此代码：

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

我试图改变 " by ' 并使用转义字符但没有办法。

我的 html 页面中的这个脚本不起作用：

$(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 说代码是正确的，但我无法在我的页面中使用。

更新 2

有什么建议吗？

谢谢

Answer 1

尝试：

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