Flask, json, render_template, действие формы, таблицы данных

Question

Я хочу, чтобы это произошло: пользователь выбирает из выпадающего списка форму, форма передает переменные в функцию Flask server app_route, которая вызывает sql, который динамически фильтруется по этим введенным параметрам и возвращает данные в браузер.

В Flask я настроил app_route, который предоставляет url_for для json файла. Возвращаемый объект - это json dict, который является результатом запроса sql, отфильтрованного по параметрам из формы, предоставленной пользователем. Функция действия формы отправляет эту функцию и возвращает json dict url.

Datatable нужен URL для данных. Кажется, это не позволяет мне использовать переменную шаблона jinja. Мой конфликт заключается в том, что мне нужно как перенаправить / отрендерить шаблон страницы html, которая имеет данные, и вернуть URL, содержащий dict сына.

Я хочу сделать render_template ('the_page_with_datatable. html', my_local_json_dict_variable).

Я могу либо сделать render_template ('the_page_with_datatable. html'), либо вернуть (my_dict_son) в app_route, вызываемом формой, отправьте и присвойте местоположение url_for, но не обоим.

Как это сделать?

Так что я уже могу вернуть данные frame_to_ html, используя обычную переменную jinja, но я особенно хочу иметь функциональность datatables. Я не хочу делать какие-либо другие таблицы. Я также могу сделать данные с помощью stati c sql, где я использую sql ответ на API. Проблема в том, что действие отправки формы возвращает один URL-адрес, когда мне нужно два - URL-адрес json и URL-адрес render_template.

HTML / JS

<form class="form-inline" id="my_form" action="get_data" method="POST">
<div class="form-group">


              <select name="year" class="selectpicker form-control">
              {% for yr in years %}
                <option value="{{ yr }}">{{ yr }}</option>
              {% endfor %}
            </select>


        <select name="month" class="selectpicker form-control">
              {% for month in months %}
                <option value="{{ month }}">{{ month }}</option>
              {% endfor %}
            </select>

</div>
    <button type="submit" class="btn btn-default">Go</button>

</form>

<table id="values_table" class="table table-striped table-bordered" style="width:100%">

        <thead>

            <tr>

                <th>Name</th>
                <th>Number</th>
                <th>Date</th>
                <th>values_€</th>


            </tr>

        </thead>


    </table>




<script>

function setupData() {

    $(document).ready(function () {

       $('#values_table').DataTable( {
        dom: 'Bfrtip',


            "ajax": {


                "url": "/get_data",

                "dataType": "json",

                "dataSrc": "data",

                "contentType":"application/json"

            },

            "columns": [

                {"data": "PersonName"},
                {"data": "PersonNumber"},
                {"data": "Date"},
                {"data": "values_€"},

            ]

        });



    });

});
}

$( window ).on( "load", setupData );


</script>





Flask routes

#renders page with select form and datatable
@app.route("/values_select" , methods=['GET','POST'])
def values_select():
    years, months = api().values_select()
    return render_template('values_select.html', years=years, months=months)


#get json data for datatable to parse from url
@app.route("/get_data" , methods=['GET','POST'])
def get_data():
    year = request.form.get('year')
    month = request.form.get('month')
    data = assets_api().values(month, year)
    return jsonify(data=data)

Answer 1

Лучше всего иметь второй маршрут, который возвращает json, и использовать источник данных ajax данных. Базовый c контур:

Ваш json маршрут (выпадающий как аргумент запроса):

@app.route('/get_data')
def get_json():
    filter_val = request.args.get('filter')

    result = # Your query here (using filter_val, or all rows if none?)

    return jsonify(result)

Ваш текущий маршрут, скорее всего, останется как есть, но:

def my_page():
    # ...
    return render_template('page.html')

И js:

$('#table').DataTable( {
    ajax: {
        url: "{{ url_for('get_json') }}?filter=" + $("#dropdown").val(),
        dataSrc: ''
    },
    columns: [ ... ]
} );

Это объясняется гораздо более (более подробно) в руководстве по датам ajax. Но я надеюсь, что это только начало.

Редактировать:

Во-первых, это настройка, вы можете справиться с повторной выборкой данных немного по-другому. Вам больше не нужна форма. Вы можете обрабатывать либо нажатие кнопки, либо изменение раскрывающегося списка (ниже). Вызов функции table.reload() приведет к повторному получению данных. Что-то вроде:

$("#the_dropdown").change(function() {
  table.reload();
});