Question

我正在使用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 );
        }
    } );
} );

Answer 1

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

我已经创建了一个基于你的jsfiddle - 这应该是你需要的：

您的JSFIDDLE已修订。

重要的一点是：

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

其中current是所点击行的索引。该表将滚动，以便单击的行位于顶部，并且扩展的部分完全可见。

Answer 2

如果有人来到这里并希望使用scrollTo jquery插件，那么这里有一个JSFIDDLE可以使用它来代替滚动。

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

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

正如markpsmith所指出的，scrollTo有点旧，滚动条现在是DataTables的原生，所以如果这对你有用，那可能是更好的选择。

jQuery DataTables ScrollTo div

2 个答案: