Buttons not visible

Buttons not visible

mhjamhja Posts: 12Questions: 5Answers: 0
edited March 2023 in Free community support

I try to include buttons, but they will not show up.

This is what I'm trying

$(document).ready(function () {
    $('#myTable').DataTable({
    "dom": '<lfip<t>r>',
        "initComplete": function() {
        this.api().buttons().container()
            .appendTo( '#myTable_info .col-sm-6:eq(0)' );
    },
    language: {
        select: {
                    rows: "&nbsp;&nbsp;&nbsp;<b>%d rader valda</b>"
            },
        "emptyTable":     "Ingen data i tabell",
        "info":           "Visar _START_ till _END_ av _TOTAL_ &nbsp;",
        "infoEmpty":      "Visar 0 till 0 av 0",
        "infoFiltered":   "(filtrerad från _MAX_)",
        "infoPostFix":    "",
        "loadingRecords": "Laddar...",
        "processing":     "",
        "search":         "Sök:",
        "zeroRecords":    "Inga matchande data funna",
    },
    buttons: [
            'copy',
        'csv',
        'excel',
        'pdf',
        'print'
        ],
    paging: false,
        ordering: true,
        info: true,
    responsive: true,
//  select: {
//            style: 'multi'
//        },
    select: true,
        order: [[0, 'desc']],
    lengthMenu: [
            [-1, 10, 25, 50],
            ['All', 10, 25, 50],
        ]
    });

    $('input.global_filter').on('keyup click', function () {
        filterGlobal();
    });

    $('input.column_filter').on('keyup click', function () {
         filterColumn($(this).parents('tr').attr('data-column'));
    });

    $('#reset').click( function (e) {
          table.colReorder.reset();
     } );

});

Please advise, what should be changed in order to get the Buttons visible.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    Answer ✓

    It looks like you are using Bootstrap based on the selector you are using in this code:

        "dom": '<lfip<t>r>',
            "initComplete": function() {
            this.api().buttons().container()
                .appendTo( '#myTable_info .col-sm-6:eq(0)' );
        },
    

    If so change the dom option to use the appropriate Bootstrap styling as shown in the examples. Looks like you want to place the buttons below the table. You might need to adjust the column classes in the default styling of "<'row'<'col-sm-5'i><'col-sm-7'p>>".

    Kevin

Sign In or Register to comment.