2017-06-17 117 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内部缩进循环。 –

相关问题