Django Python-Javascript动态表排序行_Javascript_Python_Html_Mysql_Django

Django Python-Javascript动态表排序行

javascript python html mysql django

Django Python-Javascript动态表排序行,javascript,python,html,mysql,django,Javascript,Python,Html,Mysql,Django,我从来没有做过任何javascript，但我发现这正是我想要显示一个动态表的html模板之一。我已经读到，应该有一些东西使用JQuery，但没有更多。因此，我正在寻找一个动态表的示例，该表能够对选定的列进行排序，使用javascript编写，显示在HTML模板中，使用： -列：MySQL表的字段（参见下面的示例）。 -作为行：包含在同一个表中的条目所有这些都必须使用Django（我不知道javascript文件是否必须与HTML模板分离，或者必须位于HTML模板中） MySQL表示例： C

我从来没有做过任何javascript，但我发现这正是我想要显示一个动态表的html模板之一。我已经读到，应该有一些东西使用JQuery，但没有更多。因此，我正在寻找一个动态表的示例，该表能够对选定的列进行排序，使用javascript编写，显示在HTML模板中，使用： -列：MySQL表的字段（参见下面的示例）。 -作为行：包含在同一个表中的条目所有这些都必须使用Django（我不知道javascript文件是否必须与HTML模板分离，或者必须位于HTML模板中）

MySQL表示例：

CREATE TABLE PDB(
    id_PDB_chain CHAR(5) NOT NULL PRIMARY KEY,
    id_PDB CHAR(4) NOT NULL,
    chaine VARCHAR(10) NOT NULL,
    header VARCHAR(255) NOT NULL,
    sequence_Proteine TEXT NOT NULL,
    start_seq INT NOT NULL,
    taille_Proteine INT NOT NULL,
    resolution_PDB FLOAT NOT NULL,
    meth_Res VARCHAR(10) NOT NULL,
    FOREIGN KEY (meth_Res)
    REFERENCES methodes_res(meth_Res)
    ON DELETE CASCADE
);

“models.py”文件中的对应类：

如果您需要任何其他信息，请在评论中询问，我将用这些信息编辑此帖子。

在您的视图中。py以您喜欢的任何名称创建视图。创建一个列表，并将其设置为您想要从特定模型获取的任何数据。现在转到模板。使用从数据库中选择的特定数据填充该列表后，使用If语句检查该列表中是否有任何内容。如果存在数据，则可以使用类似以下内容的For循环：

{% for model_name in list_name %}
    model_name.model_data etc # Mark it up with relevant html table code, though divs are more preferred

您可以根据需要对数据进行标记以显示表，尽管div比表更兼容、更友好。这只是一个基本的例子。在Else语句中，如果列表中提前没有数据，您可以简单地输出不存在数据。看看这里

他们会引导您构建一个投票应用程序，其中与您相关的是他们构建的index.html模板从数据库中提取问题数据，并在主页上显示一个无序的问题列表作为投票链接。只需遵循本教程，看看他们如何实现models.py和views.py以及模板，然后将标记从无序列表更改为适合您需要的任何标记。

我找到了一个适合我的解决方案，实际上非常简单：

首先，您必须下载jquery和jquery.tablesorter。这是一个官方网站，您可以在这里下载所有内容，并解释所有内容：

然后，当我使用Django时，我的HTML模板位于“myapp/templates”目录中，我的CSS和Javascript文件位于“myapp/static/myapp/”目录中

以下是我使用的模板：

{% load static %}

<head>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />

<script type="text/javascript" src="{% static 'myapp/jquery-3.2.0.min.js' %}">
</script>

<script type="text/javascript" src="{% static 'myapp/jquery.tablesorter.min.js' %}">
</script>

<script type="text/javascript">
    $(document).ready(function() 
        { 
        $("#pdbtable").tablesorter(); 
        } 
    );
</script>
</head>

{% if protdb %}
    <table id="pdbtable" align="center" border="3" width="100%">
    <thead>
    <tr>
        <th>PDB Id</th>
        <th>Chain</th>
        <th>Header</th>
        <th>Size</th>
        <th>Resol.</th>
        <th>Method Res.</th>
    </tr>
    </thead>
    <tbody>
    {% for i in protdb %}
    <tr>
        <td><a href="/pdbapp/{{ i.id_pdb_chain }}">{{ i.id_pdb }}</a></td>
        <td>{{ i.chaine }}</td>
        <td>{{ i.header }}</td>
        <td>{{ i.taille_proteine }}</td>
        <td>{{ i.resolution_pdb }}</td>
        <td>{{ i.meth_res }}</td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
{% else %}
    <p>No PDBs are available.</p>
{% endif %}

您可能知道，因为您使用的是Django，所以您的模板必须从views.py中的视图接收所有信息，并且您的数据库表（在我的示例中，我使用MySQL）必须用条目填充

这段代码正在运行，从中获得一些灵感

另一个帮助我并提供更多细节的内容是youtube视频，请查看此处的链接：

我希望这会有帮助

您可以使用python来选择数据并动态地构建所查找的表。这不需要Javascript或Jquery。研究Python循环以及如何将它们实现到Django模板中。基本上，在PHP中也可以不使用javascript做同样的事情，但因为这是Django，所以您需要使用python。python For循环应该可以很好地实现这一点。是的，我使用了For循环来生成我的表的行。但这样它就不是动态的，并且您不使用javascript。我读过这篇教程，里面没有关于我要做什么的内容。我需要使用javascript。谢谢你的回答。它怎么不是动态的？我首先是一名网络开发人员。我每天都使用PHP、HTML、CSS和Javascript。这是动态创建要在页面上显示的表或教程实例列表。请定义您特别需要的内容，以使其成为“动态的”，DB可以更新，python仍然可以仅用几行代码将新数据输出到页面。我向你保证，javascript是不需要的。相信我，通过html的简单标记，您可以将特定数据输出到表的标题、行和列。每次python循环通过时，它将构建越来越多的表。一旦它到达循环的末尾，您可以简单地让标记关闭表，viola，您有一个动态生成的表，其中包含数据库中的数据抱歉，如果我不清楚，我是这些方面的初学者。例如，我所说的动态是指，如果我在表中某一列的标题上单击clic，它将对该列后面的行进行排序。我希望表中的每一列都有这个选项，并且每一列标题将对应于我的数据库的一个表中的一个字段。我认为javascript中的JQuery库是处理这个问题的最好方法，但我不知道如何将它集成到我的网站中。如果你有一个javscript排序表的例子，像这样一个用javascript编写的，那就太完美了。如果你也知道一个网站提供了一个工具，可以自动生成javascript代码来完成这项工作，我也很感兴趣。什么是HTML标记？

{% load static %}

<head>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />

<script type="text/javascript" src="{% static 'myapp/jquery-3.2.0.min.js' %}">
</script>

<script type="text/javascript" src="{% static 'myapp/jquery.tablesorter.min.js' %}">
</script>

<script type="text/javascript">
    $(document).ready(function() 
        { 
        $("#pdbtable").tablesorter(); 
        } 
    );
</script>
</head>

{% if protdb %}
    <table id="pdbtable" align="center" border="3" width="100%">
    <thead>
    <tr>
        <th>PDB Id</th>
        <th>Chain</th>
        <th>Header</th>
        <th>Size</th>
        <th>Resol.</th>
        <th>Method Res.</th>
    </tr>
    </thead>
    <tbody>
    {% for i in protdb %}
    <tr>
        <td><a href="/pdbapp/{{ i.id_pdb_chain }}">{{ i.id_pdb }}</a></td>
        <td>{{ i.chaine }}</td>
        <td>{{ i.header }}</td>
        <td>{{ i.taille_proteine }}</td>
        <td>{{ i.resolution_pdb }}</td>
        <td>{{ i.meth_res }}</td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
{% else %}
    <p>No PDBs are available.</p>
{% endif %}

def pdbinfo(request):

    protdb = Pdb.objects.order_by('id_pdb_chain')\
    [:len(Pdb.objects.order_by('id_pdb_chain'))]

    context = {
        'protdb': protdb
    }

    return render(request, 'pdbapp/pdbinfo.html', context)