Row with details in Datatable

Question

Row with details in Datatable

Navigation

#1 by (0 votes)

0

Colleagues, I initialized the datatable to show no information, and put a click event to display the details of each row. However, when you click on this event, the datatable is modified and the details are displayed, such as "Show 10 entries", "Search", "Previous / Next". How do you keep this information hidden?

Initialization:

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

Click function:

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

                });

Does anyone know how to solve it?

jquery-datatables datatable

asked by anonymous 28.03.2018 / 14:57

1 answer

POST request sending a String via Retrofit on Android How to make a ngif inside an ngfor

score 0 · Answer 1

Unfortunately, when you do the command below, you are re-creating the table.:

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

A non-elegant solution would be to pass the options again.:

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

Click function:

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

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

But ideally, you would use the already created instance of 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
})

Click function:

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

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

As we are dealing with a global variable, I am assigning it through Object.defineProperty , to make it read-only, but this is not required.