2017-02-21 122 views
0

我正在使用django建立一個可以在網站上查看的數據庫。django和jquery datatables

在深入我的項目之前,我構建了django應用程序,並在我的模型中僅添加了一行數據。現在我正試圖使用​​jQuery數據表形象化該表。但是,jquery datatables格式沒有顯示。我嘗試了所有可能的解決方案,但沒有找到任何解決方案。

Models.py

from django.db import models 

class Variant(models.Model): 
    type = models.CharField(max_length = 20) 
    protein_id = models.CharField(max_length = 20) 
    gene_symbol = models.CharField(max_length = 20) 
    chromosome = models.CharField(max_length = 5) 
    position = models.CharField(max_length = 20) 
    variation = models.CharField(max_length = 20) 
    consequence = models.CharField(max_length = 40) 
    rs = models.CharField(max_length = 20) 
    maf = models.CharField(max_length = 20) 
    phenotype = models.CharField(max_length = 20) 
    source = models.CharField(max_length = 40) 

Views.py

from django.shortcuts import render 
from view_data.models import * 

def variants(request): 
    queryset = Variant.objects.all() 
    return render(request, "variants.html", {"allvars": queryset}) 

Urls.py

from django.conf.urls import url 
from django.contrib import admin 
from view_data import views 
from django.conf import settings 
from django.conf.urls.static import static 

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url(r'^variants/', views.variants), 
] 

if settings.DEBUG: 
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) 

variants.html

{% load static %} 

<html> 
<head> 
    <script src="{{ STATIC_URL }} js/jquery.js"></script> 
    <script src="{{ STATIC_URL }} jquery.min.js"></script> 
    <script src="{{ STATIC_URL }} jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" href="{{ STATIC_URL }} jquery.dataTables.min.css"> 
    <script> 
     $(document).ready(function(){ 
      $("table_id").dataTable(); 
      }); 
    </script> 
</head> 

<body> 

<div style="width:90%; margin:0 auto;">  
<table id="table_id" class="display" cellspacing="0" width="100%"> 
<thead> 
<tr> 
    <th>Variant Type</th> 
    <th>Protein Id</th> 
    <th>Gene Symbol</th> 
    <th>Chromosome</th> 
    <th>Position</th> 
    <th>Variation</th> 
    <th>Consequence</th> 
    <th>RS Id</th> 
    <th>GMAF</th> 
    <th>Phenotype</th> 
    <th>Source</th> 
</tr> 
</thead> 

<tbody> 
{% for v in allvars %} 
<tr> 
    <td>{{ v.type }}</td> 
    <td>{{ v.protein_id }}</td> 
    <td>{{ v.gene_symbol }}</td> 
    <td>{{ v.chromosome }}</td> 
    <td>{{ v.position }}</td> 
    <td>{{ v.variation }}</td> 
    <td>{{ v.consequence }}</td> 
    <td>{{ v.rs }}</td> 
    <td>{{ v.maf }}</td> 
    <td>{{ v.phenotype }}</td> 
    <td>{{ v.source }}</td> 
</tr> 
{% endfor %} 
</tbody> 
</table> 

</body> 
</html> 

包含js和css文件的靜態文件夾與我的django應用程序(view_data)處於同一級別。在settings.py文件中,我向INSTALLED_APPS添加了'view_data'和'jquery'。我還指定了我的靜態文件:

STATIC_URL = '/static/' 
STATIC_ROOT = (os.path.join(BASE_DIR, 'static')) 
STATIC_DIRS = (os.path.join(BASE_DIR, 'static')) 

現在,當我運行服務器,我在終端得到了下面幾行:

[21/Feb/2017 15:33:54] "GET /variants/ HTTP/1.1" 200 1079 
[21/Feb/2017 15:33:54] "GET /variants/jquery.dataTables.min.js HTTP/1.1" 200 1079 
[21/Feb/2017 15:33:54] "GET /variants/jquery.min.js HTTP/1.1" 200 1079 
[21/Feb/2017 15:33:54] "GET /variants/jquery.dataTables.min.css HTTP/1.1" 200 1079 
[21/Feb/2017 15:33:54] "GET /variants/js/jquery.js HTTP/1.1" 200 1079 

但是,當我檢查的網站鏈接,它顯示了我數據按行排列,但根本沒有表格格式。請你幫我確定我做錯了什麼,我該如何解決這個問題。

非常感謝你提前。 EMH

+0

您可能要張貼所呈現標記爲好。 – khalid13

+0

我很抱歉,但我沒有得到它。請你解釋一下你的意思。謝謝。 – EMH

回答

0

你似乎忘詞了#$("table_id").dataTable();

應該是這樣:

$("#table_id").dataTable();<br> 
+0

我已經嘗試過了,它仍然沒有顯示,謝謝你的更正。 – EMH