如何在数据表中加载表,并在加载时自动滚动到最后一个记录 [英] How to load table in Datatables and have it scroll to last record automatically on load

查看:105
本文介绍了如何在数据表中加载表,并在加载时自动滚动到最后一个记录的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



通过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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆