jQuery DataTables ScrollTo div答案

【问题标题】：jQuery DataTables ScrollTo divjQuery DataTables ScrollTo div
【发布时间】：2015-11-04 14:48:52
【问题描述】：

我正在使用 jQuery 表格，并试图弄清楚您何时使用 details-control 让表格在单击绿色加号时自动向下滚动以显示详细信息。我试过调用 div 让它自动滚动到 div。有人请告诉我哪里出错了。 https://jsfiddle.net/nnb97rh9/3/

如果您单击加号，一些用户可能不知道向下滚动并且他们将看不到所提供的“更多信息”，则问题在列表中较低。

我使用过的参考资料：
https://datatables.net/forums/discussion/2140/scroll-to-highlighted-row
https://github.com/flesler/jquery.scrollTo
https://www.datatables.net/examples/server_side/row_details.html

function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": 'https://api.myjson.com/bins/16lp6',
        scrollY:        250,
        deferRender:    true,
        scroller:       true,
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" },
            { "data": "extn", "visible": false }

        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var scroller = table.fnSettings().ntable.parentNode;
        var clickedIndex = $(this).index();

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open this row
            row.child( format(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
           $(scroller).scrollTo( $("div.slider"), 1 );
        }
    } );
} );

【问题讨论】：

标签： jquery datatables

【解决方案1】：

如昨天所述，您需要使用 Datatables Scroller 扩展。您使用的 ScrollTo 库很旧，我不确定它是否适用于 Datatables 1.10。

我已经根据你的创建了一个 jsfiddle - 这应该正是你所需要的：

您的JSFIDDLE 已修改。

重要的一点在这里：

var current = tr.index();
table.scroller().scrollToRow(current);

其中current 是点击行的索引。表格将滚动，因此单击的行位于顶部，并且展开的部分完全可见。

【讨论】：

【解决方案2】：

如果有人来到这里并想使用 scrollTo jquery 插件，那么这里有一个 JSFIDDLE 可以使用它而不是滚动条。

您只需引用数据表滚动体 css 类并滚动到最后一个 tr。如果您尝试通过表 id 引用它（在本例中为 #example），无论出于何种原因，它都将不起作用。

$('.dataTables_scrollBody').scrollTo(tr);

正如 markpsmith 指出的那样，scrollTo 有点旧，并且 scroller 现在是 DataTables 的原生功能，所以如果这对你有用，那可能是一个更好的选择。

【讨论】：