带有scrollTo插件的jQuery DataTables自动看到div

Question

我正在尝试让scrollTo插件与我正在做的事情正常工作。当您单击 table 上的绿色加号按钮时，它会打开一个 div 我试图让滚动条自动滚动以显示 div，以便在列表的下方您将自动看到详细信息，而不是像它们一样隐藏它们现在。有人可以帮助我吗？我使用 dataTables 滚动器进行了此操作，但该插件破坏了我需要的所有其他功能。

https://jsfiddle.net/nnb97rh9/7/

/* Formatting function for row details - modify as you need */
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,
        scrollCollapse: 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
     $('table.display').on('click', 'tr', function() {

        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var i = $(this).index();
         var target = $("table.display tr").eq( tr.index() );
         var duration = 300;

        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();
                $('div.slider').scrollTo(target, duration);
        }
    } );
} );

[![在此处输入图像描述][1]][1]

Answer 1

我已经在没有滚动插件(这会带来一些严重问题)的情况下通过 $(document).ready() 中的简单 jQuery 代码实现了这一点，如下所示:

$(function () {
    $('#yourTableId').on('draw.dt', function () {
        $(".dataTables_scrollBody")
            .scrollTop($(".dataTables_scrollBody").scrollTop() + $("#yourTrId").position().top - 0);
    });
});

事实上，您可以给出任何元素的位置，而不是 tr，但我一直为每个 tr 使用唯一的 id。您可能需要添加/减去一些数字来手动调整滚动。

编辑:在您的情况下，您不应在 $('#example').on 中设置 $(".dataTables_scrollBody").scrollTop ('draw.dt', ...) 创建表格时，因为 tbody(变为 div.dataTables_scrollBody)尚不可用。

我将 $(".dataTables_scrollBody").scrollTop 放置在您的事件监听器中以获取打开和关闭详细信息，并且它工作正常: https://jsfiddle.net/nnb97rh9/14/ .

// Add event listener for opening and closing details
$('table.display').on('click', 'tr', function() {
    ...

    // Open this row

    ...

    $(".dataTables_scrollBody")
            .scrollTop($(".dataTables_scrollBody").scrollTop() + $(".slider").position().top - 0);
});

唯一的问题是您正在使用 .slider 类来设置不唯一的 scrollTop ，并且如果之前打开了一个详细信息行，并且打开了另一个详细信息行行，div 滚动到第一个 .slider。因此，建议在这里使用 Id 或唯一的东西。

希望这有帮助，祝你好运......

编辑2:就像您的情况一样，数据是从服务器端获取的，并且您没有生成的 HTML 元素的唯一 ID。然后，DataTables 作者提出了一个解决方案:您可以从服务器端发送唯一的 id，将其分配给数据本身中的 tr 元素:

{
  ...
  "data": [
    {
      "DT_RowId": "row_5",
      "first_name": "Airi",
      ...
    },
    ...
}

https://www.datatables.net/examples/server_side/ids.html

编辑 3:或者，如果无法从服务器端编辑数据，只需将以下代码添加到 DataTable 初始化中:

$('#example').DataTable({
    ...
    fnCreatedRow: function( nRow, aData, iDataIndex ) {
        $(nRow).attr('id','tr_' + iDataIndex);
    }
});

引用:Add html attribute to datatable row

这样每个tr都会获得一个唯一的ID，并且可以滚动到它---工作 fiddle :https://jsfiddle.net/nnb97rh9/21/