Flask Web App: Filter table view by button

Question

I would like to be able to filter the table in this html page by button, i.e domain. Check here Html View. For example if someone clicks on photographer only photographers show up.

Flask function:

@app.route('/find_artist',methods=['POST', 'GET'])
def find_artist():
    if session.get("email"):
        if request.method == 'GET':
            return render_template('find_artist.html')
        curl = mysql.connection.cursor()
        curl.execute("SELECT * FROM freelancers")
        data = curl.fetchall()
        curl.close()
        return render_template(
            "find_artist.html",
            freelancers=data)
    else:
        return redirect(url_for('login'))

HTML code for buttons and table:

<div id="myBtnContainer">
  <button class="btn active" > Show all</button>
  <button class="btn" > Illustrator</button>
  <button class="btn"> Animator</button>
  <button class="btn" > Digital Designer</button>
  <button class="btn">Photographer</button>
  <button class="btn"> Filmmaker</button>
  <button class="btn"> Graphic Design</button>
  </div>

    <thead>
        <tr>
          <th scope="col">Serial</th>
          <th scope="col">First Name </th>
          <th scope="col">Last Name</th>
          <th scope="col">Email</th>
          <th scope="col">Domain</th>
          <th scope="col">Experience</th>
        </tr>
      </thead>
      <tbody id="myTable">
        {% for item in freelancers %}
        <tr>
          <td>{{item["id"]}}</td>
          <td>{{item["first_name"]}}</td>
          <td>{{item["last_name"]}}</td>
          <td>{{item["email"]}}</td>
          <td>{{item["domain"]}}</td>
          <td>{{item["experience"]}}</td>
        </tr>
        {% endfor %}

Thank you :)

score 2 · Accepted Answer · answered Jan 09 '19 at 21:19

The solution that worked for me is to create a separate endpoint for each button.

def multiple_buttons(condition):
    if session.get("email"):
        curl = mysql.connection.cursor()
        curl.execute("SELECT * FROM freelancers WHERE domain LIKE %s", [condition])
        data = curl.fetchall()
        curl.close()
        return render_template(
            "find_artist.html",
            freelancers=data)
    else:
        return redirect(url_for('login'))

@app.route('/showall',methods=['POST'])
def showall():
    return multiple_buttons(None)


@app.route('/illustrator',methods=['POST'])
def illustrator():
    return multiple_buttons('Illustrator')

HTML :

<form action="/showall" method="post" style="display:inline-block">
      <button class="btn active" name="showall"  type="submit"> Show All</button>
  </form>
  <form action="/illustrator" method="post" style="display:inline-block">
      <button class="btn" name="illustrator"  type="submit"> Illustrator</button>
  </form>

This answer was very helpful: https://stackoverflow.com/a/42859886/8131701

Flask Web App: Filter table view by button

1 Answers1