如何在 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 不行?