2017-06-17 113 views
1

我已經編寫了下面的Jade/Pug模板,但它並沒有激活數據表,我看不到我做錯了什麼。有人可以發現這個問題嗎?無法讓DataTables與Jade一起工作

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

解決您的問題表是在控制檯添加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內部縮進循環。 –

相關問題