Question

我一直在网上四处寻找关于DataTables的这个保存滚动位置，但没有任何运气。至少不适合我的情况。

根据数据表，要保存滚动条的状态，我需要这行代码：

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

但是因为我没有任何带有数据的文本文件，我可以解析它不起作用。我正在使用PHP和MYSQL在表中获取数组除了滚动条之外，"bStateSave": true会保存每个用户输入，例如过滤和排序。

有谁知道如何解决这个问题？

修改好吧，不知怎的，我设法让这个工作。似乎我有一些真实的东西，这不应该。现在，有了这个"sDom"滚动的工作，但我的GUI已经消失......

修改我的启动代码是：

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

Answer 1

解决方案是重写这一行：
"sDom": "frtiS",至：
"sDom": '<"H"fr>t<"F"iS>',

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

有关sDOM用法的详细说明，请参见：

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

Answer 2

保存滚动状态的解决方案是将 stateSave 设置为 true 。要完成这项工作，还需要使用dataTables.scroller.js

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

}）;

请检查：Scroller State Saving

DataTables保存状态滚动位置

2 个答案: