Question

我正在创建一个数据表，其中我需要从滚动的底部开始。我该怎么做呢？我尝试执行此处在stackoverflow中列出的解决方案，但这对我不起作用。

//1.
var scrollBody = $(conversationData.table().node()).parent();
scrollBody.scrollTop(scrollBody.get(0).scrollHeight);

//2. 
conversationData.parent().scrollTop(9999);
// Solution number 2 returns this error:
// Uncaught TypeError: conversationData.parent is not a function

//3.
 $('.dataTables_scroll').scrollTop($('.dataTables_scroll').get(0).scrollHeight);
//OR
 $('.dataTables_scrollBody').scrollTop($('.dataTables_scrollBody').get(0).scrollHeight);

OR

$('#conversationsDT .dataTables_scrollBody').scrollTop($('#conversationsDT .dataTables_scrollBody').get(0).scrollHeight);
//I tried this to be specific of what table to select
//This returns an error:
// Uncaught TypeError: Cannot read property 'scrollHeight' of undefined

我已经尝试过此代码和其他一些代码，但是它不起作用。请参阅下面的代码。

*是否有可能因为我在1页中有2个数据表而发生这种情况？但是它仍然不能与其他数据表一起使用。

HTML：

<div class="modal fade" id="openConvoModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <div class="toolbar">
                </div>
                <div class="fresh-datatables">
                    <table id="conversationsDT" class="table table-no-bordered table-hover display" cellspacing="0" width="101%">
                        <thead>
                            <tr>
                                <th>CONVERSATION</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

JS

var conversationData = $('#conversationsDT').DataTable({
                "ordering": false,
                "bInfo" : false,
                "responsive": true,
                "processing": true,
                "bPaginate": false, 
                "scrollY": $(window).height()/1.5,
                "scrollX": false,
                "scrollCollapse": true,
                "bDeferRender": true,
                "ajax": "",
                "aoColumns": [
                    {"mData": "sender",
                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                            var message = "";
                            if (oData.typeOfMessage === "SENT") {
                                message = message.concat("<div class='row'><div class='col-md-6'></div><div class='col-md-6'><span class = 'sentMessage'>");
                                message = message.concat("<p class='sentContent'>"+oData.content+"</p>");
                                if (oData.isAssignedToTicket === null) {
                                    message = message.concat("<p>NOT ASSIGNED</p>");
                                } else {
                                    message = message.concat("<a class='linkColor' href='${pageContext.request.contextPath}/cnr/viewEditTicket?ticketNumber=" + oData.isAssignedToTicket + "'>" + oData.isAssignedToTicket + "</a>");
                                }
                                message = message.concat("</span>");
                                message = message.concat("</div>");
                            }else{
                                message = message.concat("<div class='row'><div class='col-md-6'><p class = 'rcvMessage'>");
                                message = message.concat("<span class='sentContent'>"+oData.content+"</p>");
                                if (oData.isAssignedToTicket === null) {
                                    message = message.concat("<p>NOT ASSIGNED</p>");
                                } else {
                                    message = message.concat("<a class='linkColor' href='${pageContext.request.contextPath}/cnr/viewEditTicket?ticketNumber=" + oData.isAssignedToTicket + "'>" + oData.isAssignedToTicket + "</a>");
                                }
                                message = message.concat("</span>");
                                message = message.concat("</div><div class='col-md-6'></div>");
                            }

                            $(nTd).html(message);
                        }
                    },
                ],

            });

            $('#openConvoModal').on('show.bs.modal', function (e) {
                var sender = $(e.relatedTarget).data('sender');
                var portId = $(e.relatedTarget).data('port');
                console.log(sender + " ---- " +portId);
                $("#conversationsDT").DataTable().ajax.url("getConversation.json?&sender=" + sender + "&portId=" + portId);
                $('#conversationsDT').DataTable().ajax.reload();

                var scrollBody = $(conversationsDT.table().node()).parent();
                scrollBody.scrollTop(scrollBody.get(0).scrollHeight);



            });

因此，当用户单击按钮以打开模式时，将生成数据表。数据表的数据是来自一定数量的消息，因此基本上是对话，这就是为什么我需要从滚动的底部开始。

如果你们需要其他任何源代码，请告诉我。

Answer 1

我解决了这个问题。参见下面的代码

"fnDrawCallback": function (oSettings) {
                    var divBodyEl      = oSettings.nScrollBody;
                        if ( (oSettings.bSorted || oSettings.bFiltered) && ! oSettings._drawHold ) {
                                divBodyEl.scrollTop = divBodyEl.scrollHeight;
                        }
                }

此代码可在 jquery.datatables.js 文件中找到。我看了文档，他们说将代码放在fnDrawCallback中。是的，它起作用了！

感谢您的帮助！

如何在加载数据表时从滚动的底部开始？

1 个答案: