在 Jade/Pug 中使用 Bootstrap 实现数据表答案

【问题标题】：Implementing DataTables With Bootstrap In Jade/Pug在 Jade/Pug 中使用 Bootstrap 实现数据表
【发布时间】：2016-06-28 19:12:10
【问题描述】：

我有一张在 Jade/Pug 中使用引导程序创建的表。我正在尝试将其设置为 DataTable，因此我已按照执行此操作所需的步骤进行操作；但是，没有出现预期的结果。我不确定我做错了什么，所以如果有人可以提供帮助，将不胜感激。根据 DataTables 说明，我已包含以下文件：

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

我所有的代码如下：

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

再一次，如果有人能发现我做错了什么或给我任何建议，将不胜感激，谢谢！

【问题讨论】：

预期结果 - 您是指 DataTable 功能，如搜索和分页，还是表本身可见的问题？
功能，表格看起来就好了。

标签： html twitter-bootstrap datatables pug

【解决方案1】：

脚本放错地方了，它们需要放在桌子下面，所以我把它们放在 JS 函数上面这样：

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

现在它可以工作了！

【讨论】：