时间戳

首页 > 解决方案 > 无法让 Datatables JQuery 与 Flask Web 应用程序一起使用

python - 无法让 Datatables JQuery 与 Flask Web 应用程序一起使用

问题描述

我试图让我管理我的表，以便能够按名称、状态等对它们进行排序。

这是我试图做的。

这是我关注的链接https://datatables.net/manual/installation

base.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>{% block title %}{% endblock %}</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='bootstrap.min.css') }}" rel="stylesheet">

    <link href="{{ url_for('static', filename='theme.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready( function () {
    $('#example').DataTable();
} );</script>

  </head>

  <body>
{% block nav %}{% endblock %}

索引.html

    {% extends "base.html" %}
{% from "show_links.html" import show_links %}

{% block title %}Home{% endblock %}

{% block nav%}
          {{ show_links(current_user) }}
{% endblock %}
{% block body %}
      <div class="page-header">
        <h1>Current Tickets</h1>
      </div>
     <div class="row">
        <div class="col-lg-12">
            <table id="example" class="table table-hover">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Tickets</th>
                  <th scope="col">Created</th>
                  <th scope="col">Project</th>
                    <th scope="col">Status</th>
                    <th scope="col">Priority</th>
                </tr>
              </thead>
              <tbody>
                {% for ticket in tickets %}
                <tr>
                    <th scope="row">{{ ticket.id }}</th>
                    <td><a href="{{ url_for ('ticket', ticket_id = ticket.id ) }}">{{ticket.title}}</a></td>
                      <td>{{ ticket.date_posted }}</td>
                      <td>{{ ticket.project_id }}</td>
                      <td>{{ ticket.status }}</td>
                     <td>{{ ticket.priority }}</td>
                      <td><a href="{{ url_for ('ticket', ticket_id = ticket.id ) }}">Details</a></td>
                    {% if current_user.is_authenticated and current_user['expert'] == 1 and ticket.status != 'Resolved'  %}
                    <td><a href="{{ url_for ('editTicket', ticket_id = ticket.id ) }}">Edit</a></td>
                    {% endif %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
        </div><!-- /.col-lg-12 -->
      </div>
       <div class="page-header">
        <h1>Current Projects</h1>
      </div>
      <div class="row">
        <div class="col-lg-12">
          {% for project in projects %}
          <div class="list-group">
              <h4><a class="list-group-item-heading" href="{{ url_for ('project', project_id = project.id ) }}">{{ project.title }}</a></h4>
          </div>
          {% endfor %}
        </div><!-- /.col-lg-12 -->
      </div>

{% endblock %}

但是我的桌子上仍然没有任何变化。我究竟做错了什么？如何正确集成 DataTables 库以便能够对事物进行排序？

标签： pythonjqueryflask

解决方案

我认为您应该在加载数据表插件之前加载 jquery。所以以下几行应该是这样的相反顺序：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

推荐阅读