I want to add buttons to a table, like the "Edit" and "Delete" buttons in the image below.

I currently have this:

server_table.py

@app.route('/')
def index():
    return render_template('server_table.html', title='Recipes')


@app.route('/api/data')
def data():
    query = Recipe.query

    # search filter
    search = request.args.get('search[value]')
    if search:
        query = query.filter(db.or_(
            Recipe.name.like(f'%{search}%'),
            Recipe.ingredients_str.like(f'%{search}%')
        ))
    total_filtered = query.count()

    # sorting
    order = []
    i = 0
    while True:
        col_index = request.args.get(f'order[{i}][column]')
        if col_index is None:
            break
        col_name = request.args.get(f'columns[{col_index}][data]')
        if col_name not in ['name', 'ingredients_str', 'cook_time']:
            col_name = 'name'
        descending = request.args.get(f'order[{i}][dir]') == 'desc'
        col = getattr(Recipe, col_name)
        if descending:
            col = col.desc()
        order.append(col)
        i  = 1
    if order:
        query = query.order_by(*order)

    # pagination
    start = request.args.get('start', type=int)
    length = request.args.get('length', type=int)
    query = query.offset(start).limit(length)

    # response
    return {
        'data': [recipe.to_dict() for recipe in query],
        'recordsFiltered': total_filtered,
        'recordsTotal': Recipe.query.count(),
        'draw': request.args.get('draw', type=int),
    }

and server_table.html:

{% extends "base.html" %}

{% block content %}
  <table id="data" >
    <thead>
      <tr>
        <th>Recipe Name</th>
        <th>Ingredients</th>
        <th>Cook Time (Mins)</th>
        <th> </th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
{% endblock %}

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable({
        ajax: '/api/data',
        serverSide: true,
        columns: [
          {data: 'name'},
          {data: 'ingredients_str', orderable: false},
          {data: 'cook_time', orderable: false}
        ],
      });
    });
  </script>
{% endblock %}

I'm a total newbie to Flask etc, so I just don't even know where to start. There are a couple similar questions on this site but I couldn't find any for Flask in particular. Most of my code is copied from this tutorial.

CodePudding user response：

One possibility is to do this:

<script>
    $(document).ready(function () {
      $('#data').DataTable({
        ajax: '/api/data',
        serverSide: true,
        columns: [
          {data: 'name'},
          {data: 'ingredients_str', orderable: false},
          {data: 'cook_time', orderable: false},
          {
           "orderable": false,
           "data": null,
           "defaultContent": '<a > Edit </a>' 
                             '<br/>' 
                             '<a > Delete </a>'
           },
        ],
      });
    });
  </script>