Q

引導4個Datatablejs在Angular4 CLI項目

2017-06-17 66 views 1 likes

1

我剛剛創建了一個Web應用程序的角度4具有角CLI工具。引導4個Datatablejs在Angular4 CLI項目

我想在我的web應用程序使用一個表DatatableJs一個頁面來顯示。我明白了，但風格太可怕了。

我認爲這是由於依賴安裝的問題。我通過npm安裝了Bootstrap 4和DataTables core。

這是我的配置.angular-cli.json文件：

感謝。

2017-06-17 Cosma Iaffaldano

A

回答

0

您需要datatables bootstrap4 css。

https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css

2017-06-17 16:13:29 btl

+0

我把這個在我的index.html，但還是不行。 <鏈路的rel = 「樣式表的」 href = 「https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css」/> –

+0

remove從角-CLI dataTables.bootstrap.css。 json並重新編譯資源，您可能也會在頁面 – btl

+0

上與這兩者發生衝突，這是在其示例中由datatables使用的bootstrap4 css的鏈接。 //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css – btl

0

要使用DataTablejs使用NPM安裝引導4封裝使用自舉4。

npm install --save datatables.net-bs4

然後，更新「.angular-cli.json」文件樣式和腳本屬性如下。

{ 
........ 
    "apps": [ 
    { 
     "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
     //for bootstrap4 
     "../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css" 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
     "../node_modules/datatables.net/js/jquery.dataTables.js", 
     //for bootstrap4 
     "../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js" 
     ] 
     ... 
    } 
    ], 
..... 
}

上述變化後，我們就可以使用bootstrap4類節目表像bootstrap4表例如

<table id='table' datatable [dtOptions]="dtOptions" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
     </table>

2017-11-02 12:32:54

相關問題