Question

我有一个带有Datatable（1.10.15）的Thymeleaf模板。我已经生成了这段代码，以便在提交后保留所选行，但它不起作用，我没有任何javascript错误

<script th:inline="javascript">
/*<![CDATA[*/   

$(document).ready(function() {


    var table = $('#deviceEventTable').DataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        initComplete: function() {
            var api = this.api();

            if (localStorage.getItem( 'DataTables_selected' )!=null && localStorage.getItem( 'DataTables_selected' ) != 'undefined') {          
                var selected = localStorage.getItem( 'DataTables_selected' ).split(',');                    
                selected.forEach(function(s) {
                api.row(s).select();
                })
            }

          } 
    });


    table.on('select.dt deselect.dt', function() {
          localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
        })      
} );

/*]]>*/
</script>

我意识到这不是提交的问题，当我计时行时没有被选中。它被选中替换此代码

 table.on('select.dt deselect.dt', function() {
        localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
    })

这个：

$('#deviceEventTable tbody').on('click', 'td', function () {        
        $(this).closest("tr").toggleClass('selected');
    });

但是在提交时，它会消除选定的行

Answer 1

您使用一个变量并在字符串

中覆盖它

var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
var selected = '0';

只需删除var selected = '0';其他一切看起来有效：）

<强> UPD

使用旧的dataTable（）构造函数返回一个jQuery对象。在DataTable（）constructur上更改它，它的返回API对象具有对行的nedded访问权限

    var table = $('#deviceEventTable').DataTable( { 
        ...
    });

<强> UPD2 与您一起编写代码的示例 http://jsfiddle.net/y8sar09d/5/

Thymeleaf：提交后在数据表中保留选定的行

1 个答案: