Question

我正在使用带有数据表的metronic框架，但我不知道这是否与metronic有关。

除了分页按钮外，一切都很好，它们显示为没有样式的文本。

Chrome会显示以下样式：

<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生成一个无序列表。

与官方数据表示例相比，在我的代码中，如何生成完全不同的DOM元素？

这可能与我使用metronic有关吗？我觉得这难以置信。

Answer 1

回答我自己的问题：我在webpack中使用以下内容导入所有资产：

split(df, factor(df$id, levels = unique(df$id)))

但是datatables-bs和其他“造型”＆＃39;软件包在css之上包含js，因此需要单独使用require（）。尽管在npm页面上提到过，但在我遇到这个问题后，我才明白特定句子的含义。

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

数据表npm页面还应该提到，当它与webpack一起使用时，您不需要require('datatables.net'); require('datatables.net-bs'); require('datatables.net-bs/css/dataTables.bootstrap.css');，但只需要一个简单的var dt = require('datatables.net')();即可。

Answer 2

我是通过添加Css

的简单方式完成的

＆＃13;

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

＆＃13;

由于错误的类名

2 个答案: