使用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

回答

相關問題