如何在数据表中加载表，并在加载时自动滚动到最后一个记录 [英] How to load table in Datatables and have it scroll to last record automatically on load
本文介绍了如何在数据表中加载表，并在加载时自动滚动到最后一个记录的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通过PHP / mysql检索数据，然后绘制表格，代码循环遍历表格因此：
dataTables的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：\<HlTfr> t<Fip> \\'，
oTableTools：{
sSwfPath：lib / copy_csv_xls_pdf.swf，
sRowSelect：multi，
aButtons：[
打印，
{
sExtends：copy，
sButtonText：复制到剪贴板
}，
{
sExtends：csv，
sButtonText：导出CSV
}，
{
sExtends：xls，
sButtonText：保存为Excel
}，
{
sExtends：pdf，
sButtonText ：保存到PDF，
sPdfOrientation：landscape，
}
]
}
}）;
}）;
< / script>
HTML / PHP -
< div class =table>
< table class =displayid =PayMasterResults>
< thead>
< tr>
< th class =width =600px>< b>条目描述< / b>< / th>
< th class =>< b>条目时间戳< / b>< / th>
< th class =>< b>借记/信用< / b>< / th>
< th class =>< b>运行余额< / b>< / th>
< / tr>
< / thead>
< tbody>
'; （$ 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] - >描述'< / a>< / td>
< td>'$ xmldata-> Ledger [$ x] - > Stamp。'< / td>
< Td>'$ xmldata-> Ledger [$ x] - > Amount。'< / td>
< td>'$ xmldata-> Ledger [$ x] - >余额。< / td>
< / tr>
';
}
echo'
< / tbody>
< / table>
< / div> <！ - 结束表 - >
-
问题是，该表当前显示所有数据，用户可以向下滚动，如果他们喜欢，我需要表格的滚动条在表的底部。所以用户可以向上滚动但不能向下滚动。
我尝试过jquery scrollTop但是没有工作，我找不到任何人成功的例子。
- 推荐后尝试＃2 -
不幸的是，不幸的是，
< script>
$（document）.ready（function（）{
var myTable = $（＃PMLedgerDetailsTable）。dataTable（{
sPaginationType：full_numbers，
ac $$$$$$
bJQueryUI：true，
sScrollY： bLengthChange：true，
bFilter：true，
bSort：false，
bInfo：true，
bAutoWidth：false，
sDom：\'<HlTfr> t<Fip> S\'，
oTableTools：{
sSwfPath：lib / copy_csv_xls_pdf.swf
sRowSelect：multi，
aButtons：[
print，
{
sExtends：copy，
sButtonText：复制到剪贴板
}，
{
sExtends：csv，
sButtonText：导出CSV
}
{
sExtends：xls，
sButtonText：为Excel保存
}，
{
sExtends：pdf ，
sButtonText：保存到PDF，
sPdfOrientation：landscape，
}
]
}，
fnInitComplete ：function（）{
myTable.fnSettings（）。oScroller.fnScrollToRow（10000）;
}
}）;
}）;
< / script>
仍然没有运气..
解决方案
如果您使用滚动条额外的，您可以调用以下内容你的初始化函数：
fnInitComplete：function（）{
//确保你有你的表存储到变量
//（这里，我使用oTable）。然后告诉滚动条
//滚动到一个任意大的数字超出
//表中的行数。
oTable.fnSettings（）。oScroller.fnScrollToRow（100000）;
//或者，如果您在运行时知道
//您的表中的行数，则可以将
//值加入到滚动条中。
}
最好的运气！
Problem : using dataTables javascript library to display data perfectly fine.
Data is retrieved via PHP/mysql and then the table is drawn and the code cycles through the tables as such :
JAVA code for dataTables -
<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="" width="600px"><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 -->
--
The problem is, the table currently displays all data and the user can scroll down if they like, I need the table to have the scrollbar at the bottom of the table. so the User can scroll up, but not down.
I have attempted jquery scrollTop but that did not work, i cannot find any examples of people succesflly getting this to work.
-- Attempt #2 after recommendation --
no luck unfortunately
<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>
Still no luck..
解决方案
If you use the Scroller extra, you can call the following in your initialization function:
"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.
}
Best of luck!
这篇关于如何在数据表中加载表，并在加载时自动滚动到最后一个记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
