buttons responsive

buttons responsive

camilord50camilord50 Posts: 3Questions: 3Answers: 0

I have a problem with the buttons on my table.
at the moment it is minimized, it can not be visualized.

table = table.DataTable({
                data: data_,
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json",
                },
                "columns": columnsArray,
                    "paging": true,
                    "responsive": true,
                    dom: "<'row'<'col-sm-6 text-left'f>>"+
                         "<'row'<'col-sm-6 text-left'B>>"+
                         "<'row'<'col-sm-12'tr>>"+
                         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
                    columnDefs: [{
                    visible: false
                    }],                    
                    buttons: [
                        {
                          extend: 'colvis',
                          text:'Columnas visibles',
                          titleAttr:'Columnas'  
                        },
                        {
                            extend: 'print',
                            text:      '<i class="fa fa-print"></i> Imprimir',
                            titleAttr: 'Imprimir',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'copyHtml5',
                            text:      '<i class="fa fa-files-o"></i> Copiar',
                            titleAttr: 'Copiar',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            text:      '<i class="fa fa-file-excel-o"></i> Excel',
                            titleAttr: 'Excel',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            text:      '<i class="fa fa-file-text-o"></i> CSV',
                            titleAttr: 'CSV',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            text:      '<i class="fa fa-file-pdf-o"></i> PDF',
                            titleAttr: 'PDF',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
            
                    ]
                    
                    
                });
                
                
            elemento.each(function (contador, fila) {
                //var title = $(this).text();
                $(this).html('<br><input type="text" class="form-control inpSearch" num-column="' + contador + '" placeholder="Search" />');
            });


            //options.tabla();
            table.columns().every(function () {
                var that = this;
                $('.inpSearch', this.footer()).unbind();
                $('.inpSearch', this.footer()).bind({
                    "keyup change": function () {
                        if (that.column($(this).attr("num-column")).search() !== this.value) {
                            that.column($(this).attr("num-column")).search(this.value).draw();
                        }
                    }
                });
            });

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    Hi @camilord50 ,

    CSS is always hard to diagnose without seeing it. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.