2017-06-17 2 views
1

次のJade/Pugテンプレートを書いていますが、データテーブルが起動せず、何が間違っているのか分かりません。誰かが問題を見つけることができますか?DataTableを翡翠で使用することができません

html 
    head 
     title= 'Feed List' 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") 
     link(href="//cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css", rel="stylesheet") 

    body 
     div.container.jumbotron 
      h1.header NSE Corporate Announcements 
      h3.header Top Annoucements by corporates listed on NSE 
     div.container 
      script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js') 
      script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js') 
      script(src='//cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js') 
      script. 
       $(document).ready(function() { 
        $('#resultTable').DataTable(); 
       }); 
      div#dataToShow 
       table#resultTable.table.table-hover.datatables 
        tr.head 
         th='Ticker' 
         th='Link' 
         th='Date' 
         th='Description' 
        tbody 
        for feed in feedList 
         tr 
          td= feed.ticker 
          td 
           a(href=feed.attachmentLink) #{feed.ticker} 
          td= moment(feed.dateAdded).format('DD-MM-YYYY HH:MM:SS') 
          td= feed.purposeText 
+0

コンソールにエラーを追加するのですか? –

答えて

3

ウェブページにエラーがあります。

theadタグがありません。 thead要素とTBODYを持っているだけで、テーブルとDataTableの作品は、あなたの問題へ

ソリューションはtheadタグ

html 
 
    head 
 
     title= 'Feed List' 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") 
 
     link(href="//cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css", rel="stylesheet") 
 

 
    body 
 
     div.container.jumbotron 
 
      h1.header NSE Corporate Announcements 
 
      h3.header Top Annoucements by corporates listed on NSE 
 
     div.container 
 
      script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js') 
 
      script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js') 
 
      script(src='//cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js') 
 
      script. 
 
       $(document).ready(function() { 
 
        $('#resultTable').DataTable(); 
 
       }); 
 
      div#dataToShow 
 
       table#resultTable.table.table-hover.datatables 
 
        thead 
 
         tr 
 
         th Ticker 
 
         th Link 
 
         th Date 
 
         th Description 
 
        tbody 
 
         for feed in feedList 
 
         tr 
 
          td= feed.ticker 
 
          td 
 
           a(href=feed.attachmentLink) #{feed.ticker} 
 
          td= moment(feed.dateAdded).format('DD-MM-YYYY HH:MM:SS') 
 
          td= feed.purposeText

+0

変更を加えました。今すぐデータテーブルがレンダリングされますが、何も動作していません... – DrBug

+0

変更を加えました。現在、データテーブルはレンダリングされていますが、何も動作していません...テーブルの最初の行に「テーブルにデータがありません」と表示されます – DrBug

+0

インデントエラーです。 tbody内のインデント用ループ。 –

関連する問題