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)

You haven't defined a variable table.

Kramb
– Kramb

2017-06-30 12:24:54 +00:00
Commented Jun 30, 2017 at 12:24 — Kramb
– Kramb, Commented Jun 30, 2017 at 12:24

zennith · Accepted Answer · 2017-06-30 12:29:40Z

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

answered Jun 30, 2017 at 12:29

zennith

4102 gold badges5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dani · Accepted Answer · 2017-06-30 12:29:13Z

0

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() )   
        })      
} );

answered Jun 30, 2017 at 12:29

Dani

2,0862 gold badges20 silver badges32 bronze badges

1 Comment

irina_ikonn Over a year ago

I do like this and I get selected first row after submit by condition I select no row of table. How can I get table without selected rows by condition I select no row?

Collectives™ on Stack Overflow

Datatables: DataTables_selected

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related