Question

我正在尝试让scrollTo插件与我正在做的事情一起正常工作。当你单击表格上的绿色加号按钮时，它会打开一个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。您可能想要添加/减去一些数字来手动调整滚动。

编辑：在您创建表格时，您不应该在$(".dataTables_scrollBody").scrollTop设置$('#example').on('draw.dt', ...)，因为tbody（成为{{ 1}}）尚不可用。

我在您的事件监听器中放置div.dataTables_scrollBody以打开和关闭详细信息，并且工作正常：https://jsfiddle.net/nnb97rh9/14/。

$(".dataTables_scrollBody").scrollTop

唯一的问题仍然是你使用// 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这不是唯一的，如果一个细节行在之前打开并且一个打开另一个细节行，则div会滚动到第一个scrollTop。因此，建议在此处使用Id或使用其他唯一的东西。

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

EDIT 2 ：在您的情况下，正在从服务器端获取数据，并且您没有生成的HTML元素的唯一ID。然后存在来自DataTables作者的解决方案：您可以从服务器端发送唯一ID以分配给数据本身中的.slider元素：

tr

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

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

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

参考：Add html attribute to datatable row

这样每个$('#example').DataTable({ ... fnCreatedRow: function( nRow, aData, iDataIndex ) { $(nRow).attr('id','tr_' + iDataIndex); } });都会获得一个唯一的ID，并且可以滚动到它 - 工作小提琴：https://jsfiddle.net/nnb97rh9/21/

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

1 个答案: