title: Implementing DataTables With Bootstrap In Jade/Pug
body: <p>I have a table that I've created using bootstrap in Jade/Pug. I'm trying to make it a DataTable, so I've followed the steps needed in order to do that; however, the expected result is not showing up. I'm not sure what I'm doing wrong, so if anyone could help it would be much appreciated. As per DataTables instruction, I have included these files:</p>
  
  <pre><code>script(src='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css')
  script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js')
  </code></pre>
  
  <p>and have this in the body:</p>
  
  <pre><code>script.
  $(document).ready(function() {
      $('#pickle').DataTable();
  });
  </code></pre>
  
  <p>All of my code is as follows:</p>
  
  <pre><code>extends layout
  
  block content
  head
      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='css/bootstrap.min.css', rel='stylesheet')
      title Bootstrap Example
      link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
      script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js')
      script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
  body
      script(src='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css')
      script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js')
  
      script(src='http://code.jquery.com/jquery.js')
      script(src='js/bootstrap.min.js')
      .container
          .jumbotron
              h2 Bootstrap/Datatables Test Page
          table#pickle.table.table-hover.table-striped.table-bordered
              thead
                  tr
                      th #
                      th Name
                      th Type
                      th Battery
              tbody
                  tr
                      th(scope='row') 1
                      td BOSS RC-1
                      td Loop
                      td Yes
                  tr
                      th(scope='row') 2
                      td Line 6 DL4
                      td Delay
                      td Yes
                  tr
                      th(scope='row') 3
                      td Polara
                      td Reverb
                      td Yes
  script.
      $(document).ready(function() {
          $('#pickle').DataTable();
      });
  </code></pre>
  
  <p>Once again, if anyone can spot something I'm doing wrong or give me any advice it would be much appreciated, thanks!</p>