由於錯誤的類名造成的分頁按鈕

我正在使用帶有數據表的metronic框架，但我不知道這是否與metronic有關。由於錯誤的類名造成的分頁按鈕

除了分頁按鈕，所有的都很好，它們顯示爲沒有造型的文本。

鉻揭示了以下樣式：

<div class="dataTables_paginate paging_simple_numbers" id="auth_history_paginate"> 
    <a class="paginate_button first disabled" aria-controls="auth_history" 
    data-dt-idx="0" tabindex="0" id="auth_history_first">First</a> 
    <span> 
     <a class="paginate_button current" aria-controls="auth_history" 
     data-dt-idx="2" tabindex="0">1</a> 
     <a class="paginate_button " aria-controls="auth_history" data-dt-idx="3" 
     tabindex="0">2</a> 
    </span>

，但沒有定義paginate_button類。

官方數據表演示顯示以下內容：

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate"> 
    <ul class="pagination"> 
    <li class="paginate_button previous disabled" id="example_previous"> 
     <a href="#" aria-controls="example" data-dt-idx="0" tabindex="0">Previous</a> 
    </li> 
    <li class="paginate_button active"> 
     <a href="#" aria-controls="example" data-dt-idx="1" tabindex="0">1</a> 
    </li> 
    <li class="paginate_button "> 
     <a href="#" aria-controls="example" data-dt-idx="2" tabindex="0">2</a> 
    </li>

於是就有了JS生成一個無序列表。

在我的代碼中，與官方datatables示例相比，完全不同的DOM元素是如何生成的？

這可能與我使用metronic有關嗎？我覺得這不合情理。

來源

2017-04-15 raarts

它看起來在這裏很好 - > ** HTTP：//keenthemes.com/preview/metronic/theme/admin_4/table_datatables_managed .html **很難說，沒有一個例子，重現行爲的確切代碼，而不僅僅是你自己的計算機的輸出。 – davidkonrad

原來，如果您忘記包含樣式-js，它會在覈心庫中使用默認功能。 – raarts

要回答我的問題：我用用的WebPack以下導入所有資產：

require('datatables.net'); 
require('datatables.net-bs/css/dataTables.bootstrap.css');

但數據表，BS等「造型」包中包含對CSS的頂部JS，所以需要需要（）分開編輯。儘管在npm頁面上提到它，但在遇到此問題後，我只理解特定句子的含義。

require('datatables.net'); 
require('datatables.net-bs'); 
require('datatables.net-bs/css/dataTables.bootstrap.css');

的數據表NPM頁面還應該指出，與使用的WebPack時，你不需要做var dt = require('datatables.net')();但只是一個簡單的require('datatables.net')的伎倆。

來源

2017-04-17 08:27:33 raarts

偉大的你得到它的工作！我也曾經很困惑，直到我意識到我需要包含'* -dt'包（通過bower），就像'datatables.net-buttons' *和*'datatables.net-buttons-dt'一樣。 – davidkonrad

我在'datatables.net-bs/css/dataTables.bootstrap.css'中只能看到3條關於分頁的規則，這也沒有幫助 –

我的問題的答案是，引導程序特定的js部分也需要運行所以使用ul> li結構化尋呼機而不是span> a –

我用簡單的方法只是添加CSS做了

.dataTables_paginate a { 
 
     padding: 6px 9px !important; 
 
     background: #54c5e6 !important; 
 
     border-color: #2196F3 !important; 
 
    }

來源

2018-02-01 12:16:58 Neeraj

由於錯誤的類名造成的分頁按鈕

回答

相關問題