如何在 Datatables 中加载表并让它在加载时自动滚动到最后一条记录

Posted

技术标签:

【中文标题】如何在 Datatables 中加载表并让它在加载时自动滚动到最后一条记录【英文标题】:How to load table in Datatables and have it scroll to last record automatically on load 【发布时间】:2012-11-09 07:03:55 【问题描述】:

问题:使用 dataTables javascript 库完美地显示数据。

通过 php/mysql 检索数据,然后绘制表格,代码在表格中循环:

数据表的 JAVA 代码 -

<script>
$(document).ready(function() 
    $("#PayMasterResults").dataTable( 
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bJQueryUI" : true,
    "sScrollY": "215",
    "bLengthChange": true,
    "bFilter": true,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": false,
    "sDom": \'<"H"lTfr>t<"F"ip>\',
    "oTableTools": 
            "sSwfPath": "lib/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": [
                    "print",
                    
                            "sExtends": "copy",
                            "sButtonText": "Copy to clipboard"
                    ,
                    
                            "sExtends": "csv",
                            "sButtonText": "Export CSV"
                    ,
                    
                            "sExtends": "xls",
                            "sButtonText": "Save for Excel"
                    ,
                    
                            "sExtends": "pdf",
                            "sButtonText": "Save to PDF",
                            "sPdfOrientation": "landscape",
                    
            ]
    
 );
);
</script>

html / PHP -

            <div class="table">
            <table class="display" id="PayMasterResults">
                    <thead>
                            <tr>
                             <th class="" ><b>Entry Description</b></th>
                             <th class=""><b>Entry Timestamp</b></th>
                             <th class=""><b>Debit/Credit</b></th>
                             <th class=""><b>Running Balance</b></th>
                            </tr>
                    </thead>
                    <tbody>
            ';
            for($x=0; $x<$xmldata->Ledger->count(); $x++) 
                    echo '
                            <tr class="gradeB">
                             <td><a href="#" onclick="loadPMLedgerDetail(\''.$xmldata->Ledger[$x]->attributes()->ID.'\',\''.$_POST['ID'].'\');">'.$xmldata->Ledger[$x]->Description.'</a></td>
                             <td>'.$xmldata->Ledger[$x]->Stamp.'</td>
                             <Td>'.$xmldata->Ledger[$x]->Amount.'</td>
                             <td>'.$xmldata->Ledger[$x]->Balance.'</td>
                            </tr>
                    ';
            
            echo '
                    </tbody>
            </table>

            </div> <!-- End Table -->

--

问题是,表格当前显示所有数据,用户可以根据需要向下滚动,我需要表格底部有滚动条。因此用户可以向上滚动,但不能向下滚动。

我尝试了 jquery scrollTop,但没有成功,我找不到任何人成功让它工作的例子。

-- 推荐后尝试#2--

不幸的是没有运气

<script>
$(document).ready(function() 
var myTable = $("#PMLedgerDetailsTable").dataTable( 
    "sPaginationType": "full_numbers",
    "aaSorting": [[ 0, "asc" ]],
    "bPaginate": true,
    "bJQueryUI" : true,
    "sScrollY": "215",
    "bLengthChange": true,
    "bFilter": true,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": false,
    "sDom": \'<"H"lTfr>t<"F"ip>S\',
    "oTableTools": 
            "sSwfPath": "lib/copy_csv_xls_pdf.swf",
            "sRowSelect": "multi",
            "aButtons": [
                    "print",
                    
                            "sExtends": "copy",
                            "sButtonText": "Copy to clipboard"
                    ,
                    
                            "sExtends": "csv",
                            "sButtonText": "Export CSV"
                    ,
                    
                            "sExtends": "xls",
                            "sButtonText": "Save for Excel"
                    ,
                    
                            "sExtends": "pdf",
                            "sButtonText": "Save to PDF",
                            "sPdfOrientation": "landscape",
                    
            ]
    ,
    "fnInitComplete" : function() 
            myTable.fnSettings().oScroller.fnScrollToRow(10000);
    
 );

);

</script>

还是没有运气..

【问题讨论】:

【参考方案1】:

如果你使用Scroller extra,你可以在你的初始化函数中调用如下:

"fnInitComplete": function()  

    // Make sure you have your table stored to a variable
    // (here, I used oTable).  Then tell the Scroller to
    // scroll to an arbitrary large number beyond the 
    // number of rows in your table.

    oTable.fnSettings().oScroller.fnScrollToRow(100000); 

    // Alternatively, if you know the number of rows in 
    // your table at runtime, you could just feed in that
    // value to the Scroller.

祝你好运!

【讨论】:

不走运,已编辑原始问题以显示我在您发表评论后尝试了什么 啊哈!菜鸟错误,我没有包含 dataTables.scroller.min.js !!!一旦包含在内,代码就起作用了【参考方案2】:

试试,

$(".dataTables_scrollBody").scrollTop(9999);

http://datatables.net/forums/discussion/19084/scroller-plugin-scroll-table-with-keypress

【讨论】:

以上是关于如何在 Datatables 中加载表并让它在加载时自动滚动到最后一条记录的主要内容,如果未能解决你的问题,请参考以下文章

如何安装 OpenCV 'samples' 库并让它在 armhf 上工作?

安装vsphere client时出现“错误2229 无法在SQL查询中加载表”等错误

将不同的链接分配给不同的图像并让它在 iframe 容器上播放分配的 (youtube) 链接

覆盖 viewDidAppear 并让它加载特定的 URL 不行?

如何使用 Datatables Jquery 插件销毁表并使用新的更新数据重新初始化同一个表

Yajra DataTables:无法在表中加载记录