Row com details na Datatable

Question

Colegas,
inicializei a datatable para não mostrar nenhuma informação, e coloquei um evento click para exibir os detalhes de cada linha. Porém, quando entra nesse evento click, a datatable é modificada e passa a apresentar os detalhes, tais como: "Show 10 entries", "Search", "Previous/Next".
Como fazer para que essas informações continuem ocultas??

Inicialização:

minha_table = table.dataTable({
                aaSorting: [],
                columnDefs: [
                    { targets: 'no-sort', orderable: false }
                ],
                iDisplayLength: 10,
                processing: false,
                serverSide: false,
                searching: false,
                bPaginate: false,
                bInfo:false
            });

Função do click:

$(document).on("click",'.minha_classe',function (e) {
                    e.preventDefault();

var api = $('#tabela').dataTable().api();
                    var tr = $(this).closest('tr');
                    var row = api.row( tr );

if ( row.child.isShown() ) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child( format(row.data()) ).show();
                        tr.addClass('details');
                        tr.addClass('shown');
                    }

});

Alguém sabe como resolver?

Tobias Mesquita · Answer

infelizmente, ao fazer o comando abaixo, você está recriando a tabela.:

$('#tabela').dataTable().api()

uma solução não elegante seria passar novamente as opções.:

Object.defineProperty(window, 'dtOpcoes', {
    value: {
        aaSorting: [],
        columnDefs: [
            { targets: 'no-sort', orderable: false }
        ],
        iDisplayLength: 10,
        processing: false,
        serverSide: false,
        searching: false,
        bPaginate: false,
        bInfo:false
    },
    writable: false, 
    configurable: false
})

minha_table = table.dataTable(dtOpcoes);

Função do click:

$(document).on("click",'.minha_classe',function (e) {
    e.preventDefault();

var api = $('#tabela').dataTable(dtOpcoes).api();
    ...
});

mais o ideal, seria utilizar a instancia já criada do DataTable.:

Object.defineProperty(window, 'minha_table', {
    value: table.dataTable({
        aaSorting: [],
        columnDefs: [
            { targets: 'no-sort', orderable: false }
        ],
        iDisplayLength: 10,
        processing: false,
        serverSide: false,
        searching: false,
        bPaginate: false,
        bInfo:false
    }),
    writable: false, 
    configurable: false
})

Função do click:

$(document).on("click",'.minha_classe',function (e) {
    e.preventDefault();

var tr = $(this).closest('tr');
    var row = minha_table.row( tr );
});

Como estamos lidando com uma variável global, estou atribuindo ela através do Object.defineProperty, para torna-la somente leitura, mas isto não é obrigatório.

Row com details na Datatable

One Answer

Add your own answers!

Ask a Question