stateSave DataTables doesn't works at first visit of the page

flowerpower

I have a DataTable with the reload of data every 10 seconds, but when I visit the page of this DataTable the first time and select one or more rows when starts the reload function the selected rows come unselected!! But if I visit another page and then I return on this DataTable page all works very well! Why? How can I solve thi problem?

I use Bootstrap 3.3.7 and many DataTables javascripts libraries:
bower_components/datatables.net/js/jquery.dataTables.min.js - version: 1.10.16 (latest from Bower)
bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js - DataTables Bootstrap 3 integration
bower_components/datatables.net-select/js/dataTables.select.min.js - version 1.2.7 (latest from Bower)
bower_components/jquery-datatables-checkboxes/js/dataTables.checkboxes.min.js - version 1.2.10

Thi is my code loaded (javascript libraries and DataTable definition):

<link href="/Content/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/bower_components/Ionicons/css/ionicons.min.css" rel="stylesheet"/>
<link href="/Content/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="/Content/dist/css/skins/skin-blue.min.css" rel="stylesheet"/>

<!-- DataTables css -->
<link href="/Content/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/bower_components/datatables.net-select-bs/css/select.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

<script src="/Content/bower_components/jquery/dist/jquery.js"></script>
<script src="/Scripts/BiblioPug/jquery.validate.min.js"></script>
<script src="/Content/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/Content/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/Content/dist/js/adminlte.min.js"></script>
<script src="/Content/dist/js/demo.js"></script>

<!-- DataTables javascripts -->
<script src="/Content/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/Content/bower_components/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/Content/bower_components/jquery-datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="/Content/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                var table = $('#volumesTable').DataTable({
                    ajax: {
                        type: "POST",
                        url: '<%= ResolveUrl("~/MyWebServices/GetVolumes") %>',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        dataSrc: "ListOfVolumes"
                    },
                    columns: [
                        { data: 'Request' },
                        { data: 'Matrix' },
                        { data: 'Collocation' },
                        { data: 'Date' },
                        { data: 'Hour' },
                        { data: 'Floor' },
                        { data: 'Request' }
                    ],
                    columnDefs: [
                        {
                            className: "dt-center", "targets": "_all"
                        },
                        {
                            orderable: false, "targets": -1
                        },
                        {
                            targets: -1,
                            render: function (data, type, row, meta) {
                                if (type === "display") {
                                    data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                                }
                                return data;
                            },
                            checkboxes: {
                                selectRow: true,
                                selectAllRender: '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            }
                        }
                    ],
                    select: 'multi',
                    order: [[3, 'desc']],                    
                    stateSave: true,                    
                    rowId: 'extn'
                });

                setInterval(function () {
                    table.state.clear();
                    table.ajax.reload(null, false);
                }, 10000);
});
</script>

allan

Could you link to a page showing the issue please? I'm afraid I don't understand what would cause that issue.

Allan

flowerpower

I have uploaded the Table Configuration and Data with DataTables Debugger on this link: https://debug.datatables.net/ocuwin
The problem is this:
when I open for the first time the page and use the "select all" checkbox all become selected, but after 10 seconds (every 10 seconds runs table.ajax.reload like in the code in my last post) all row return deselected. But if I go to other page of my site and than return to the problematic page so all works fine. Why this behavior?