CODEWITHSUNDEEP
htmltwitter-bootstrapdatatablespug
Pig_Mug
Pig_Mug

Reputation: 167

Implementing DataTables With Bootstrap In Jade/Pug

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:

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')

and have this in the body:

script.
$(document).ready(function() {
    $('#pickle').DataTable();
});

All of my code is as follows:

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();
    });

Once again, if anyone can spot something I'm doing wrong or give me any advice it would be much appreciated, thanks!

Upvotes: 1

Views: 5858

Answers (1)

Pig_Mug
Pig_Mug

Reputation: 167

The Scripts were misplaced, they needed to go below the table, so I put them above the JS function like this:

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.
    $(document).ready(function() {
        $('#pickle').DataTable();
    });

and now it works!

Upvotes: 1

Related Questions