DataTables save state scroll position

2019-09-12 06:24发布

I've been looking around on the net for hours about this save scroll position for DataTables, but without any luck. At least not for my case.

According to datatables, to save the state of the scrollbar I need this line of code:

    $(document).ready(function() {
    var oTable = $('#example').dataTable( {
        "sScrollY": "200px",
        "sAjaxSource": "media/data/2500.txt",
        "sDom": "frtiS",
        "bDeferRender": true,
        "bStateSave": true
    } );
} );

But since I'm not having any text file with the data which I can parse it's not working. I'm fetching arrays in the table with PHP and MYSQL.
The "bStateSave": true does save every user input like filtering and sorting, except for the scrollbar.

Does anyone know how to solve this?

EDIT Ok somehow I managed to get this working. It seems I had something on true, which shouldn't be. Now, with this "sDom" the savestate of scrolling works, but my GUI is gone...

EDIT My initiation code is:

<!-- DATATABLES ENABLE INIT -->
<script>
<?php include ('js/datatables/ordernumhtml.js');?>
<?php include ('js/datatables/ordercurrency.js');?>
<?php include ('js/datatables/dataTables.scroller.min.js');?>
    $(document).ready( function () {
        $('#table1').dataTable( {
        "sDom": "frtiS",
        "bDeferRender": false,
        "bStateSave": true,
        "bAutoWidth": true,
        "bInfo": true,
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "bScrollAutoCss": true,
        "bScrollInfinite": false,
        "sScrollY": "350px",
        "bJQueryUI": true,
        "bProcessing": true,
        "aoColumns": [
          { "sType": "num-html" },
          { "sType": "numeric" },
          null,
          null,
          null,
          null,
          null,
          null,
          { "sType": "currency" },
          null,
          { "bSortable": false }
        ]           
      } );  
    } );
</script>

2条回答
Fickle 薄情
2楼-- · 2019-09-12 06:53

And the solution was to rewrite the line:
"sDom": "frtiS", to:
"sDom": '<"H"fr>t<"F"iS>',

The "H" and the "F" represents the header and the footer for the jQueryUI.

A detailed description of the sDOM usage can be found here:

http://datatables.net/usage/options#sDom

查看更多
该账号已被封号
3楼-- · 2019-09-12 07:01

The solution to save the scroll state is to set stateSave to true. To make this work one also needs to use dataTables.scroller.js

$(document).ready(function() {
$('#example').DataTable( {
    ajax:           "data/2500.txt",
    deferRender:    true,
    dom:            "frtiS",
    scrollY:        200,
    scrollCollapse: true,
    stateSave:      true
} );

} );

Check this : Scroller State Saving

查看更多
登录 后发表回答