DataTables 保存状态滚动位置答案

【问题标题】：DataTables save state scroll positionDataTables 保存状态滚动位置
【发布时间】：2012-11-30 11:16:49
【问题描述】：

我已经在网上四处寻找有关 DataTables 的保存滚动位置的几个小时，但没有任何运气。至少对我来说不是。

根据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>

【问题讨论】：

标签： php save scrollbar jquery-datatables

【解决方案1】：

解决方案是将以下行：
"sDom": "frtiS", 改写为：
"sDom": '<"H"fr>t<"F"iS>',

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

sDOM 用法的详细说明可以在这里找到：

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

【讨论】：

【解决方案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

【讨论】：