如何在数据表中加载表,并在加载时自动滚动到最后一个记录 [英] 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屋!