无法让 DataTables 与 Jade 一起使用

Question

我编写了以下 Jade/Pug 模板，但它没有启动数据表，我看不出我做错了什么。有人能发现问题吗？

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

Answer 1

您的网页中有错误。

您缺少thead 标签。 DataTable 仅适用于具有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