使用Bootstrap在Jade/Pug中实现DataTable

我有一张使用Jade/Pug中的Bootstrap创建的表。我试图把它作为一个DataTable，所以我已经完成了所需的步骤;但是，预期的结果并未显示出来。我不确定我做错了什么，所以如果有人能帮助它，我们将非常感激。按照数据表的指令，我已经包含了这些文件：使用Bootstrap在Jade/Pug中实现DataTable

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

，如果任何人都可以发现我做错的事情或给我任何建议，将非常感谢，谢谢！

来源

2016-06-28 Pig_Mug

*预期的结果* - 你是指DataTable功能（如搜索和分页）还是存在与表本身可见的问题？ – BSMP

功能，表格显示得很好。 –

脚本被放错了地方，他们需要去下面的表格，所以我把他们的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(); 
    });

和现在的作品！

来源

2016-06-28 19:37:26

使用Bootstrap在Jade/Pug中实现DataTable

回答

相关问题