DataTables - открывает дочерние строки поверх родительской строки

Question

Мне нужно реализовать функциональность, где дочерняя строка будет скользить и открываться сверху родительской строки, а не снизу.Может ли кто-нибудь, пожалуйста, помогите.

// 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 );

    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();
    }
} );

https://jsfiddle.net/nnb97rh9/3/

Answer 1

Проблема в том, что HTML показывает вложенную таблицу ниже строки, в которую он вложен. Используемая вами подпрограмма datatables устанавливает вложенную таблицу, когда вы нажимаете зеленую кнопку, поэтому вы сталкиваетесь с ограничением HTML.

Единственный способ, которым вы могли бы возможно сделать это, очень грязно: нажав зеленую кнопку, перейдите к строке, предшествующей текущей, и вызовите на ней функцию format.,(Конечно, вам нужно будет найти способ пропустить row.data из текущей строки, а не из предыдущей, после перехода к предыдущей. И была бы другая путаница, которую я не собираюсь рассматривать.)

Возникает вопрос о том, как обрабатывать первую строку, поскольку до нее нет ни одной;вам, вероятно, придется придумать другую функцию для этого.Это все нелогично и нелогично: вам не нужно вкладывать таблицу в строку с данными, не имеющими к ней отношения.

Что приводит нас к тому, почему вы хотите сделать это в первую очередь.Вы почти наверняка запутаете своих пользователей: в основном вы делаете это не так, как 99.99999% от остального мира, тем самым лишая своих пользователей их предыдущего опыта и делая ваш UX нелогичным.Для сравнения, что, если вам нужен «выпадающий» список вместо более обычного выпадающего списка?Разве это не смущает большинство пользователей?

Мое предложение - подумать над тем, чтобы отказаться от этой идеи.Сделайте несколько шагов назад и переосмыслите то, чего вы хотите достичь, а затем посмотрите, сможете ли вы сделать что-то более приближенное к установленному поведению пользовательского интерфейса.Пользователи предпочитают работать с пользовательскими интерфейсами, которые используют свой прошлый опыт работы с пользовательскими интерфейсами, поэтому им не нужно тратить дополнительное время на изучение нового способа ведения дел.Не просите их найти новые способы делать то, что они уже умеют делать, иначе они не будут использовать ваше приложение.