javascript - Datatable'stateSave：true，'崩溃表，有人知道为什么吗？

Question

我正在使用 Datatable JS 替换一个表格，一切正常，直到我添加 stateSave: true 参数，下面是我没有 stateSave 的代码，这将正确显示如下所示的表格：

var table = $('#example').DataTable({
        dom: 'Bfrtip',
        colReorder: true,
        "bPaginate": false,
        buttons: [
            {
                extend: 'copy',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">content_copy</i>Copy Current Page</a>',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csv',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">list</i>Export Current Page as CSV</a>',
                exportOptions: {
                    columns: ':visible'
                },
                filename: function () {
                    var today = new Date();
                    var dd = String(today.getDate()).padStart(2, '0');
                    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                    var yyyy = today.getFullYear();

                    today = dd + '.' + mm + '.' + yyyy;
                    return 'AZ-CustomTransactionReport: ' + today;
                },
            },
            {
                extend: 'pdfHtml5',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">picture_as_pdf</i>Export Current Page as PDF</a>',
                exportOptions: {
                    columns: ':visible'
                },
                orientation: 'landscape',
                pageSize: 'A2',
                filename: function () {
                    var today = new Date();
                    var dd = String(today.getDate()).padStart(2, '0');
                    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                    var yyyy = today.getFullYear();

                    today = dd + '.' + mm + '.' + yyyy;
                    return 'AZ-CustomTransactionReport: ' + today;
                },
            },

            {
                extend: 'print',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">print</i>Print Current Page</a>',
                messageBottom: null
            }
        ],
        "columnDefs": [
            {
                "visible": false,
                "searchable": false,
                "targets": [{% for i in transactionCheckBoxes %}{% if i.value == False %} {% if forloop.counter0 == 84 %}{% else %}{{forloop.counter0}}{% endif %}, {% endif %}{% endfor %}],
                className: 'hidden',
            },

        ],

    });

在上述工作正常的情况下，下面会加载一个被破坏并涂黑的表格，表格数据与其重叠：

var table = $('#example').DataTable({
        dom: 'Bfrtip',
        colReorder: true,
        stateSave: true, /*ADDED LINE*********/
        "bPaginate": false,
        buttons: [
            {
                extend: 'copy',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">content_copy</i>Copy Current Page</a>',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'csv',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">list</i>Export Current Page as CSV</a>',
                exportOptions: {
                    columns: ':visible'
                },
                filename: function () {
                    var today = new Date();
                    var dd = String(today.getDate()).padStart(2, '0');
                    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                    var yyyy = today.getFullYear();

                    today = dd + '.' + mm + '.' + yyyy;
                    return 'AZ-CustomTransactionReport: ' + today;
                },
            },
            {
                extend: 'pdfHtml5',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">picture_as_pdf</i>Export Current Page as PDF</a>',
                exportOptions: {
                    columns: ':visible'
                },
                orientation: 'landscape',
                pageSize: 'A2',
                filename: function () {
                    var today = new Date();
                    var dd = String(today.getDate()).padStart(2, '0');
                    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                    var yyyy = today.getFullYear();

                    today = dd + '.' + mm + '.' + yyyy;
                    return 'AZ-CustomTransactionReport: ' + today;
                },
            },

            {
                extend: 'print',
                text: '<a class="waves-effect waves-light btn"><i class="material-icons left">print</i>Print Current Page</a>',
                messageBottom: null
            }
        ],
        "columnDefs": [
            {
                "visible": false,
                "searchable": false,
                "targets": [{% for i in transactionCheckBoxes %}{% if i.value == False %} {% if forloop.counter0 == 84 %}{% else %}{{forloop.counter0}}{% endif %}, {% endif %}{% endfor %}],
                className: 'hidden',
            },

        ],

    });

我正在使用以下库：

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.js"></script>

<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>

标签： javascriptdatatables

Answer 1

好的，我不知道为什么，但添加：

stateDuration:-1,

似乎已经成功了，如果有人能解释为什么会发生这种情况，那么启用 localstorage 会修复这个错误 ，那就太好了！希望这可以帮助任何有同样问题的人