Datatables: DataTables_selected

Question

I have a SpringBoot application I have a Datatable 1.10.15 defined where I want to Keep the selected row after submit. This is the code in my Thymeleaf template

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

$(document).ready(function() {


    $('#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(',');
                var selected = '0';
                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>

But the row is not selected and instead I have this error:

jquery.min.js:2 Uncaught ReferenceError: table is not defined
    at HTMLDocument.<anonymous> (1:473)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

Answer 1

This can help

 $(document).ready(function() {


 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(',');
            var selected = '0';
            selected.forEach(function(s) {
            api.row(s).select();
            })
        }

      } 
});

table.on....
.....

Answer 2

You have forgotten to initialize table variable:

$(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(',');
                var selected = '0';
                selected.forEach(function(s) {
                api.row(s).select();
                })
            }

          } 
    });


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