Scroll Datatable Mobile

Bom dia,

Será que alguém teria um código css para adicionar scroll no datatable para dispositivo Mobile.

    FLUIGC.modal({
        title: '',
        content:'<h5 style="font-size:11px">TOP 10 Ordens Compra (Geral)</h5>' +
                '<footer class="panel-subtitle" style="font-size:10px" id="lblSubtitulo00"></footer>' +
                '<footer class="panel-subtitle" style="font-size:10px" id="lblSubtitulo01"></footer>' +
                '<hr>' +
                '<script type="text/template" class="templateConsTOP10OCGeral">' +
                    '<tr style="font-size:9px">' +
                        '<td style="font-size:10px">{{CODCOLIGADA}}</td>' +
                        '<td style="font-size:10px">{{CODFILIAL}}</td>' +
                        '<td style="font-size:10px">{{FILIAL}}</td>' +
                        '<td style="font-size:10px">{{DATAEMISSAO}}</td>' +
                        '<td style="font-size:10px">{{DATAENTREGA}}</td>' +
                        '<td style="font-size:10px">{{NUMEROMOV}}</td>' +
                        '<td style="font-size:10px">{{QTDCOMPRADA}}</td>' +
                        '<td style="font-size:10px">{{QTDRECEBER}}</td>' +
                        '<td style="font-size:10px">{{VLUNITARIO}}</td>' +
                    '</tr>' +
                '</script>' +
                '<div id="tblConsTOP10OCGeral"></div>',
        id: 'fluig-modal-mob',
        size: 'large',
        actions: [{
            'label': 'OK',
            'autoClose': true
        }]
    }, function(err, data) {
        if(err) {
        } else {
            $("#lblSubtitulo00").text('SEQ Item: ' + sequencia);
            $("#lblSubtitulo01").text(produto);

            var that = this;
            that.mydata = [];

            var fields = new Array(codColigada, idPrd);
            var sortingFields = new Array("CODCOLIGADA", "CODFILIAL", "DATAEMISSAO");

            var ds = DatasetFactory.getDataset("dsFLUIG000300013", fields, null, sortingFields);

            if (ds.values.length > 0) {
                for (var i = 0; i < ds.values.length; i++) {
                    that.mydata.push({
                        CODCOLIGADA: ds.values[i]["CODCOLIGADA"],
                        CODFILIAL: ds.values[i]["CODFILIAL"],
                        FILIAL: ds.values[i]["FILIAL"],
                        DATAEMISSAO: formatDate(ds.values[i]["DATAEMISSAO"]),
                        DATAENTREGA: formatDate(ds.values[i]["DATAENTREGA"]),
                        NUMEROMOV: ds.values[i]["NUMEROMOV"],
                        QTDCOMPRADA: ds.values[i]["QTDCOMPRADA"],
                        QTDRECEBER: parseFloat(ds.values[i]["QTDRECEBER"]).toFixed(4),
                        VLUNITARIO: parseFloat(ds.values[i]["VLUNITARIO"]).toFixed(4)
                    });
                }
            }        

            var myTable = FLUIGC.datatable('#tblConsTOP10OCGeral', {
                dataRequest: that.mydata,
                renderContent: '.templateConsTOP10OCGeral',
                limit: 30,                
                offset: 0,
                patternKey: 'text',
                limitkey: 'per_page',
                offsetKey: 'page',
                formatData: function(data) {
                     return data;
                },
                multiSelect: false,
                classSelected: 'danger',
                header: [{
                    'title': 'Coligada',            
                    'size': 'col-xs-1 col-sm-1 col-md-1',
                    'display': false
                }, {
                    'title': 'CodFilial',            
                    'size': 'col-xs-1 col-sm-1 col-md-1',
                    'display': false
                }, {
                    'title': 'Filial',
                    'dataorder': 'FILIAL',            
                    'size': 'col-xs-1 col-sm-1 col-md-1',
                    'display': true
                }, {
                    'title': 'Emissão',            
                    'size': 'col-xs-2 col-sm-2 col-md-2',
                    'display': true
                }, {
                    'title': 'Entrega',            
                    'size': 'col-xs-2 col-sm-2 col-md-2',
                    'display': false
                }, {
                    'title': 'Movimento',           
                    'size': 'col-xs-1 col-sm-1 col-md-1',
                    'display': true
                }, {
                    'title': 'Comprado',            
                    'size': 'col-xs-2 col-sm-2 col-md-2',
                    'display': true
                }, {
                    'title': 'À Receber',            
                    'size': 'col-xs-2 col-sm-2 col-md-2',
                    'display': true
                }, {
                    'title': 'Vl.Unit.',            
                    'size': 'col-xs-2 col-sm-2 col-md-2',
                    'display': true
                }],
                search: {
                    enabled: false,
                    onSearch: function(response) {
                        // DO SOMETHING
                    },
                    onlyEnterkey: false,
                    searchAreaStyle: 'col-md-3'
                },
                scroll: {
                    target: '#tblConsTOP10OCGeral',
                    enabled: false,  // (False) Aqui funciona apenas para browser
                    onScroll: function() {
                    }
                },
                actions: {
                    enabled: false,
                    template: '.my_template_area_actions',
                    actionAreaStyle: 'col-md-6'
                },
                navButtons: {
                    enabled: false,
                    forwardstyle: 'btn-warning',
                    backwardstyle: 'btn-warning',
                },
                emptyMessage: '<div class="text-center" style="font-size:10px"><strong>Nenhum dado foi encontrado.</strong></div>',
                tableStyle: 'table-striped',
                draggable: {
                    enabled: false,
                    onDrag: function(dragInfo) {
                        // Do something
                        return false; // If it returns false, will cancel the draggable
                }                
             }
            }, function(err, data) {
                if (err) {
                    FLUIGC.toast({ message: err, type: 'danger' });
                }
            });
        }
    })
}

Obrigado, Leandro Francisquini

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags scrolling datatable mobile ou faça a sua própria pergunta.