2014-10-07 1 views
0

플라스크를 배우고 500 대 기업의 데이터를 테이블에 표시하는 페이지를 만들려고합니다.플라스크 HTML 템플릿 (자바 스크립트 포함)

올바르게 표시되고 이제는 모든 열을 기준으로 테이블을 정렬 할 수있게되었습니다. 내가 내 정적 디렉토리에 저장 한 일부 자바 스크립트를 필요로하지만 난에서 자바 스크립트를 당겨하는 방법에 대한 아주 명확하지 않다 같습니다

질문 :.

  • 내가 올바른 프레임 워크를 가지고 있습니까?
  • javascript를 올바르게 활용하려면 어떻게해야합니까?
  • 나는 base.html에있는 머리에 스크립트 태그를 넣어야한다고 읽었습니다. 그렇게하지 않을 시간이 있습니까?
  • 내가해야 할 질문은 무엇입니까? 다음은

다음
-app 
--static 
    *sorttable.js 
--templates 
    *base.html 
    *companies.html 
--run.py 
--views.py 
--companies.csv 

아래는

<html> 
    <head> 
    <script> src="{{ url_for('static', filename='sorttable.js', type='text/javascript') }}"</script> 
    {% if title %} 
    <title>{{ title }} - microblog</title> 
    {% else %} 
    <title>Welcome to microblog</title> 
    {% endif %} 
    </head> 
    <body> 
    <div>Microblog: <a href="/index">Home</a></div> 
    <div>Login: <a href="/login">Here</a></div> 
    <hr /> 
    {% block content %}{% endblock %} 
    </body> 
</html> 

이 companies.html입니다 base.html 내 파일 구조

{% extends "base.html" %} 
{% block content %} 
<table class="sortable"> 

<table> 
     <thead> 
     <tr> 
      <th> Revenues </th> 
      <th> Profits </th> 
      <th> Rank </th> 
      <th> Company </th> 
     </tr> 
     </thead> 
    {% for keys in companies %} 

     <tr> 
      <td> {{ keys.Revenues }} </td> 
      <td> {{ keys.Profits }} </td> 
      <td> {{ keys.Rank }} </td> 
      <td> {{ keys.Standard }} </td> 
     </tr> 

    {% endfor %} 
    <tfoot> 
    </tfoot> 

</table> 
{% endblock %} 

그리고 run.py

을 보였다

<script> src="{{ url_for('static', filename='sorttable.js', type='text/javascript') }}"</script> 

<script src="{{ config.STATIC_URL }}/static/sorttable.js"></script> 

에 :

답변

0

은 내가에서 base.html에 라인을 변경

목록 정렬하는 얻는 방법에 대한 해답을 발견 장난.

은 확실히이

0

귀하의 script 태그가 잘못되었습니다 일반적으로 개선 할 수있는 방법에 대한 다른 사람들의 피드백을 얻을 싶어요. script (<script>) 바로 뒤에 태그를 닫는 대신 먼저 속성을 포함시켜야합니다. 당신이 HTML5 (<!doctype html>)를 사용하지만, 그렇지 포함 할 필요가있는 경우

<script src="{{ url_for('static', filename='sorttable.js') }}"></script> 

type="text/javascript"는 선택 사항입니다.

관련 문제