Unable to get DataTables to work with Jade

Question

I have written the following Jade/Pug template but it does not fire up the datatables and I cannot see what I am doing wrong. Can someone spot the issue ?

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

There is an error in your webpage.

You are missing thead tag. DataTable works only with table which has thead and tbody.

Solution to your problem is add thead tag:

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