DataTables save state scroll position

纵然是瞬间 提交于 2019-12-13 06:16:10

问题


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>

回答1:


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




回答2:


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



来源:https://stackoverflow.com/questions/13644170/datatables-save-state-scroll-position

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!