DataTables保存状态滚动位置 [英] DataTables save state scroll position

问题描述

关于这个DataTables的保存滚动位置，我已经在网上闲逛了好几个小时，但是没有任何运气.至少不是我的情况.

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

但是由于我没有任何文本文件可以解析的数据，因此无法正常工作.我正在使用PHP和MYSQL提取表中的数组.
"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?

编辑 好吧，我设法成功了.看来我有真实的想法，不应该这样.现在，使用此"sDom"可以进行滚动的保存状态，但是我的GUI消失了...

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>

推荐答案

解决方案是重写该行:
"sDom": "frtiS",转到:
"sDom": '<"H"fr>t<"F"iS>',

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

"H"和"F"代表jQueryUI的页眉和页脚.

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

有关sDOM使用的详细说明，请参见:

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

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

这篇关于DataTables保存状态滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！