Page lenght in button format d'ont display!

klermann

I'm trying to use the page lenght in button format, but the select display does not appear, when I put it in normal format it appears normally. What can it be?

tangerine

Please supply more detail. Preferably also show your code.

klermann

I'll show you the whole script.
`var editor; // use a global for the submit and return data rendering in the examples
var messageFiles = 'Clipboard - Lista de receitas(entradas)';
var classeBtn = 'btn btn-outline btn-default';
var classeBtnEditor = 'btn btn-info';
var erroValorTxt = '<strong>Erro</strong> ao carregar o valor total das receitas';
var erroDataTxt = '<strong>Erro</strong> ao carregar as datas, atualize a página. [F5]';
var loading = '<div class="loaderData loader loader-circle font-size-60"></div>';
var positionExport = {columns: [0, 1, 2, 3]};

    $(document).ready(function() {

        getDataTable();
        pegaData();
        getValMesAnoReceitas();

        function getDataTable(){

            editor = new $.fn.dataTable.Editor( {
                ajax: "/financeiro/receitas/listAll",
                table: "#receitasTable",
                idSrc: "id",
                fields: [ {
                       label: "Descrição:",
                       name: "descricaoReceita"
                  }, {
                        label: "Data:",
                        name: "dataReceita.year"
                  }, {
                        label: "Contas:",
                        name: "minhasContas[0].nome"
                  }, {
                        label: "Tipo:",
                        name: "tipoReceitas[0].corTipoReceita"
                  }, {
                        label: "Valor:",
                        name: "valorReceita"
                    }
                ]
            } );

            var oTable = $('#receitasTable').DataTable( {
                ajax: "/financeiro/receitas/listAll",
                dom: '<"row"<"col-sm-8"B><"col-sm-4"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-5 font-size-12"i><"col-sm-7"p>>',
                bProcessing : true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json",
                    processing: loading
                 },
                 lengthMenu: [
                    [ 5, 10, 20, 30, 50, 100, -1 ],
                    [ '5 itens', '10 itens', '20 itens', '30 itens', '50 itens', '100 itens', 'Todos' ]
                ],
                columns: [
                    { data: "id" }, 
                    { data: "descricaoReceita" },
                    { 
                        data: "dataReceita" ,
                        mRender: function(data){
                            dataDay = data.dayOfMonth < 10 ? '0' + data.dayOfMonth : data.dayOfMonth;
                            dataMonth = data.monthValue < 10 ? '0' + data.monthValue : data.monthValue;
                            dataObj = dataDay + '/' + dataMonth + '/' + data.year
                            return dataObj;
                        },
                    },
                    {
                        data: "minhasContas[0].nome"/* ,
                        mRender: function (data, type, full){
                           return data[0].nome;
                        },
                        sDefaultContent: '' */
                    },
                    {
                        data: "tipoReceitas[0].nome"/*  ,
                        mRender: function (data, type, full){
                           return data[0].corTipoReceita;
                        },
                        sDefaultContent: '' */
                    },
                    { 
                        data: "valorReceita",
                        mRender: $.fn.dataTable.render.number('.', ',', 2, 'R$ ') 
                    }
                ],
                select: "single",
                buttons: [
                     {  extend:     "create", 
                        editor:     editor, 
                        text:       '<i class="icon fa-plus"></i>',
                        titleAttr:  'Criar receita',
                        className: classeBtnEditor
                    },
                    {   extend: "edit",
                        editor: editor,
                        text:       '<i class="icon fa-edit"></i>',
                        titleAttr:  'Editar receita',
                        className: classeBtnEditor
                    },
                    {   extend: "remove",
                        editor: editor,
                        text:       '<i class="icon fa-trash-o"></i>',
                        titleAttr:  'Excluir receita',
                        className: classeBtnEditor,
                        exportOptions: {
                            columns: [ 1, ':visible' ]
                        }
                    }, 
                    {   extend:     'pageLength',
                        text:       '<i class="icon wb-list"></i>  ',
                        titleAttr:  'Listar itens',
                        className:  classeBtn
                    },
                    {
                        text:       '<i class="icon fa-refresh"></i>',
                        titleAttr:  'Atualizar itens',
                        className: classeBtn,
                        action: function ( e, dt, node, config ) {
                            dt.ajax.reload();
                        }
                    },
                    {
                        extend:    'copyHtml5',
                        text:      '<i class="fa fa-files-o"></i>',
                        titleAttr: 'Copiar',
                        exportOptions: positionExport,
                        message:   messageFiles,
                        className: classeBtn
                    },
                    {
                        extend:    'excelHtml5',
                        text:      '<i class="fa fa-file-excel-o"></i>',
                        titleAttr: 'Excel',
                        exportOptions: positionExport,
                        message:   messageFiles,
                        className: classeBtn
                    },
                    {
                        extend:    'pdfHtml5',
                        text:      '<i class="fa fa-file-pdf-o"></i>',
                        orientation: 'portrait',
                        titleAttr: 'Ver PDF',
                        exportOptions: positionExport,
                        message:   messageFiles,
                        className: classeBtn
                    },
                    {
                        extend:    'print',
                        text:      '<i class="fa fa-print"></i>',
                        titleAttr: 'Inprimir',
                        exportOptions: positionExport,
                        message:   messageFiles,
                        className: classeBtn
                    }
                 ] 
            });

             $('button[id*="filtrarData_"]').click(function(){ 

                   oTable.rows().remove();
                   oTable.ajax.url("/financeiro/receitas/listMesAno");
                   oTable.draw();
                   setTimeout(function(){
                       oTable.ajax.reload();
                       getValMesAnoReceitas();

                   }, 400);
                 });
                 $('#filtrarTodos').click(function(){

                   oTable.rows().remove();
                   oTable.ajax.url("/financeiro/receitas/listAll");
                   oTable.draw();
                   setTimeout(function(){
                       oTable.ajax.reload();
                       getValTotalReceitas();

                    }, 400);
                 });
        };

        function addZero(zero) {
            return (zero < 10 ? '0' : '') + zero;
        };

        function dataFormatada() {
            var data = new Date(),
            mes = addZero(data.getMonth() + 1),
            ano = data.getFullYear()

            return [ mes, ano ].join('/');
        };

        function stringMes(mes) {

            switch (mes) {
            case "01": mes = "Janeiro";   break;
            case "02": mes = "Fevereiro"; break;
            case "03": mes = "Março";     break;
            case "04": mes = "Abril";     break;
            case "05": mes = "Maio";      break;
            case "06": mes = "Junho";     break;
            case "07": mes = "Julho";     break;
            case "08": mes = "Agosto";    break;
            case "09": mes = "Setembro";  break;
            case "10": mes = "Outubro";   break;
            case "11": mes = "Novembro";  break;
            case "12": mes = "Dezembro";  break;
            default: break;}

            return mes;
        }

        function pegaData() {

            var dataAtualizada = dataFormatada();
            var pegaData = dataAtualizada;
            tbody(pegaData);

            $('button[id*="filtrarData_"]').click(function() {
                var pegaData = $(this).val();
                tbody(pegaData);
            });
        };

        function tbody(date) {
            var urlData = "datas/" + date;

            $('.loaderDataBg').show();

            $.ajax({
                url : urlData,
                beforeSend : function() {},
                success : function(retorno) {

                    var obj = JSON.parse(retorno);

                    var mesAnt = obj.dataAntUrl.substring(0, 2);
                    var mesAtu = obj.dataAtuUrl.substring(0, 2);
                    var mesPos = obj.dataPosUrl.substring(0, 2);

                    $('#dataPrev').html(stringMes(mesAnt) + " de " + obj.dataAntUrl.substring(3, 7));
                    $('#filtrarData_Ant').val(obj.dataAntUrl);

                    $('#dataAtu').html(stringMes(mesAtu) + " de " + obj.dataAtuUrl.substring(3, 7));
                    $('#filtrarData_Atu').val(obj.dataAtuUrl);

                    $('#dataPost').html(stringMes(mesPos) + " de " + obj.dataPosUrl.substring(3, 7));
                    $('#filtrarData_Pos').val(obj.dataPosUrl);

                    $('.loaderDataBg').fadeOut();
                },
                error : function(a, b, c) {

                    $('#erroData').fadeToggle();
                    $('.loaderDataBg').fadeToggle();

                    setTimeout(function() {

                        $('#erroData').fadeToggle();

                        alert('Erro: ' + a[status] + ' ' + c);

                    }, 5000); 
                }
            });
        };
    }); `

klermann

All other buttons are working

klermann

The button was restored here, it was one of the configuration files. Which file necessarily takes care of this detail?

allan

The pageLength button doesn't have any dependencies other than DataTables core and Buttons core. It is included by default in Buttons core. So as long as you are loading dataTables.buttons.js, the pageLength button will be there.

Allan

PPD_BDP

Klermann,

We do this too and ran into this problem. Thought I'd post the answer in case anyone else has the same issue.

We want to format the buttons, too, and add icons. So, the issue is that the pageLength button is looking for text that reads in the following format:

{'-1': 'Show all rows', _: 'Show %d rows'}

So, we do the following:

    buttons: [{
      extend: 'pageLength',
    }, {
      extend: 'copyHtml5',
      text: '<i class="fa fa-files-o"></i> Copy',
      title: exportTitle
    }, {
      extend: 'excelHtml5',
      text: '<i class="fa fa-file-excel-o"></i> Excel',
      title: exportTitle
    }, {
      extend: 'csvHtml5',
      text: '<i class="fa fa-file-text-o"></i> CSV',
      title: exportTitle
    }, {
      extend: 'pdfHtml5',
      text: '<i class="fa fa-file-pdf-o"></i> PDF',
      title: exportTitle
    }, {
      extend: 'print',
      text: '<i class="fa fa-file-pdf-o"></i> Print',
      title: exportTitle
    }],

Then, we add some additional changes using lengthMenu, which you can actually add an icon to if you'd like.

    lengthMenu: [
        [ 5, 10, 20, -1 ],
        [ '<i class="fa fa-icon"></i> 5 rows', '<i class="fa fa-icon"></i> 10 rows', '20 rows', '<i class="fa fa-all-icon"></i>All' ]
    ],

And viola. It's not ideal. But it does the trick. Just move your icon before everything, or stick to the {'-1': 'Show all rows', _: 'Show %d rows'} format.