Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Data Science and Machine Learning - #19 Aplicação Real IV (Filtros Múltiplos)

20/08/2021

Nesse tutorial continuaremos a trabalhar com ajax, porém agora implementando filtros múltiplos no nosso sistema com Python e Pandas.

Filtros múltiplos com Pandas

Vamos implementar os filtros múltiplos na nossa aplicação real.

app/templates/index.html

Vamos inserir o html dos demais filtros:

<div class="row mt-5 justify-content-around">
    <select class="col-5 form-control" name="country" id="country" required>
        <option value="">Selecione o País</option>
        {% for countries in countryFilter %}
            <option value="{{countries}}">{{countries}}</option>
        {% endfor %}
    </select>
    <input class="col-4 form-control" name="title" id="title" type="text">
    <button class="col-2 btn btn-primary">Pesquisar</button>
</div>

app/static/js/javascript.js

No javascript, após o clique no botão de pesquisa ele vai executar o ajax de filtros múltiplos:

(function(win,doc){
    'use strict';

    doc.querySelector('.btn').addEventListener('click',async(event)=>{
        event.preventDefault();
        let req=await fetch('http://localhost:8000/countryFilter/',{
            method:'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json',
                'X-CSRFToken':doc.querySelectorAll('input')[0].value
            },
            body:JSON.stringify({
                'country':doc.querySelector('#country').value,
                'title':doc.querySelector('#title').value,
            })
        });
        let res=await req.json();
        doc.querySelector('.result').innerHTML=res.data;
    },false);

})(window,document);

app/views.py

Vamos fazer a filtragem através do Pandas na nossa views:

def countryFilter(request):
    if request.body:
        field = json.loads(request.body.decode('utf-8'))
        search = field['country']
        title = field['title']
        df2=df.dropna()
        data['dados']=df2[(df2['country'].str.contains(search))&(df2['title'].str.contains(title,flags=re.IGNORECASE))]\
        .to_html(index=False,classes=['table','table-striped','mt-5'])
        return JsonResponse({'data':data['dados']})

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Data Science and Machine Learning - #18 Aplicação Real III (Ajax)
No tutorial de hoje aprenderemos como realizar filtros de dados com Pandas utilizando o ajax de maneira dinâmica e sem refresh de página.
Saiba mais!
Data Science and Machine Learning - #20 Aplicação Real V (Detalhes)
Nesse tutorial iremos exemplificar como tratar as colunas do nosso Data Frame e como implementar botões de ações na tabela.
Saiba mais!
Python
Nesta seção aprofundaremos os conhecimentos sobre uma das linguagens em maior ascenção no mercado, o Python.
Saiba mais!