Question

我通过html表显示来自flask-app的一些数据，包括此表中的动态表单：

<Table id="Datenbank" width="800px" align="left" >
        <tr>
        <th>ID</th>
        <th>Wochentag</th>
        <th>Startzeitpunkt</th>
        <th>Wochentag</th>
        <th>Endzeitpunkt</th>
        <th>Text</th>
        <th>Option</th>
        </tr>

        <form method="post" action="/delete_data_via_table">
        {% for element in datatable %}
        <tr>
            <td align="center"> {{ element[0] }} </td>
            <td align="center"> {{ element[5] }} </td>
            <td align="center"> {{ element[4] }} </td>
            <td align="center"> {{ element[7] }} </td>
            <td align="center"> {{ element[6] }} </td>
            <td align="left">   {{ element[1] }} </td>
            <td align="center"><button name="WhichEntryDel" id="WhichEntryDel" value="{{ element[0] }}" type="submit">Entfernen</button></td>
        </tr>
        {% endfor %}
        </form>
</table>

按下按钮的值转移到名为“delete_data_via_table”的烧瓶应用程序，以删除数据库的这一行。

我现在正在使用jquery.dataTables来显示数据：

<script type="text/javascript" language="javascript" src="/static/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Datenbank').DataTable();
} );
</script>

和

    <Table id="Datenbank" class="display" width="800px" align="left">
        <thead>
        <tr>
        <th>ID</th>
        <th>Wochentag</th>
        <th>Startzeitpunkt</th>
        <th>Wochentag</th>
        <th>Endzeitpunkt</th>
        <th>Text</th>
        <th>Option</th>
        </tr>
        </thead>
        <tbody>
        <form method="post" action="/delete_data_via_table">
        {% for element in datatable %}
        <tr>
            <td align="center"> {{ element[0] }} </td>
            <td align="center"> {{ element[5] }} </td>
            <td align="center"> {{ element[4] }} </td>
            <td align="center"> {{ element[7] }} </td>
            <td align="center"> {{ element[6] }} </td>
            <td align="left">   {{ element[1] }} </td>
            <td align="center"><button name="WhichEntryDel" id="WhichEntryDel" value="{{ element[0] }}" type="submit">Entfernen</button></td>
        </tr>
        {% endfor %}
        </form>
        </tbody>
</table>

Example view of the table

如果你按下那个按钮，现在的问题是没有任何反应......我猜这是因为桌面的javascript没有传递信息。

你有什么想法解决这个问题吗？

感谢。：）

Answer 1

感谢您的输入，我的代码现在看起来像这样：

烧瓶应用程式：

company count   monthly average
a       5       6
b       13      14
c       2       2
d       45      45
e       23      21
f       6       5

和HTML：

@app.route('/_delete_data_via_table_v2')
def delete_data_via_table_v2():
del_ID = request.args.get('a', 0, type=int)
tmp_string = "DELETE FROM ledtext WHERE ID = "+ str(del_ID)
g.db.execute(tmp_string)
g.db.commit()
flash ('Eintrag ' + str(del_ID) + ' erfolgreich gelöscht.')
return jsonify()

如果您按一个按钮，则会调用该应用并删除该条目。但Flash-Information和表视图在您手动重新加载页面之前不会更改（按F5键）。

通常我会在应用结束时使用此代码：

<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
moment.locale('de');

$(document).ready(function() {
    var table = $('#Datenbank').DataTable( {
        /*"ajax": "data/arrays.txt", */
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Entfernen</button>"
        } ]
    } );

    $('#Datenbank tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        $.getJSON($SCRIPT_ROOT + '/_delete_data_via_table_v2', { a: data[0] } );
        /* location.reload(true); */
    } );
} );
</script>

但它没有工作听到。意思是：页面不会再次渲染，闪光信息本身不会出现。

有谁知道如何修复它？

Answer 2

我现在通过添加＆＃34; location.reload（false）＆＃34;解决了这个问题。可能有更好的解决方案。

        $('#Datenbank tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        $.getJSON($SCRIPT_ROOT + '/_delete_data_via_table_v2', {
            a: data[0]                                              /* Übergibt die ID (als Nummer) */
            }, function(data) {                                     /* Erforderlich für Aktualisierung */
            location.reload(false) });                              /* Verursacht Aktualisierung (false bewirkt abgeschwächte Form des Neuladens) */
            /* return false; */                                     /* Anscheinend überflüssig */
            });
    } );

HTML表单不再通过JavaScript调用Python

2 个答案: