fixedColumns не работает вместе с отзывчивым в Datatables - PullRequest
0 голосов
/ 05 мая 2020

У меня есть DataTable, где у меня есть несколько скрытых столбцов с использованием параметра responsive, а также фиксированный столбец с использованием параметра fixedColumns. Проблема в том, что при отображении скрытого содержимого строки в фиксированном столбце не работают должным образом, как вы можете видеть на следующем изображении

enter image description here

В конфигурации dataTable у меня есть следующее:

var table = $('.data-table').DataTable({
    responsive: {
        // https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer
        details: {
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                } ).join('');

                return data ?
                    $('<table/>').append( data ) :
                    false;
            },
        }
    },
    "columnDefs":[
        {
            "width": "auto",
            "orderable": orderable,
            "targets": 'col-actions'
        },
        {
            "width": "auto",
            "targets": '_all'
        }
    ],
    fixedColumns: {
        leftColumns: 0,
        rightColumns: fixed,
    },
})

И таблица таким образом: (Я не помещаю весь tbody, потому что это foreach, а также в структуре это то же самое, что thead)

<table id="user-table" class="table table-hover table-in-card data-table">
    <thead>
        <tr>
            <th scope="col" class="all col-actions text-center"><i class="fas fa-eye"></i></th>
            <!-- hidden -->
            <th scope="col" class="none hidden-column">{{ __( 'general.created_at' ) }}</th>
            <th scope="col" class="none hidden-column">{{ __( 'general.created_by' ) }}</th>
            <th scope="col" class="none hidden-column">{{ __( 'general.updated_at' ) }}</th>
            <th scope="col" class="none hidden-column">{{ __( 'general.updated_by' ) }}</th>
            <!-- end hidden -->
            <th scope="col" class="all">{{ __( 'customer.identifier') }}</th>
            <th scope="col" class="all">{{ __( 'customer.full-name') }}</th>
            <th scope="col" class="all">{{ __( 'customer.contact_information-label' ) }}</th>
            <th scope="col" class="all">{{ __( 'customer.email') }}</th>
            <th scope="col" class="all field-date">{{ __( 'customer.date_of_birth-label') }}</th>
            <th scope="col" class="all">{{ __( 'customer.category' ) }}</th>
            <th scope="col" class="all">{{ __( 'customer.subcategory-label' ) }}</th>
            <th scope="col" class="all col-actions">Acciones</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Среди нескольких вещей, которые я пытался сделать, наиболее близким к решению, который я когда-либо был, является использование события responsive-display (https://datatables.net/reference/event/responsive-display) dataTable, но я не могу наконец получить доступ к nodes внутри DOM:

table.on('responsive-display', function ( e, datatable, row, showHide, update ){
    var trs = $('.DTFC_Cloned tr');
    trs.each(function(){
        var tr      = $(this);
        var trIndex = tr.attr('data-dt-row');

        if( trIndex == row.index() && showHide ) {
            tr.css('height', 250)
        } else if ( trIndex == row.index() && !showHide ){
            tr.css('height', 'auto')
        }
    })
    console.log(trs)
});

.DTFC_Cloned - это фиксированная таблица с заголовком Actions в изображении. Вывод console.log (trs) более или менее соответствует моим ожиданиям, но, как я уже сказал ранее, я не могу получить доступ к этим элементам внутри DOM

enter image description here

Единственный способ, которым он работает правильно, - это поместить скрытые столбцы после фиксированного столбца, но тогда он теряет эту функцию. И если я, например, поставлю fixedColumns: {rightColumns: 5}, я получаю тот же результат при запуске, это не работает.

Заранее большое спасибо за любую помощь, которую вы можете оказать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...