Weid 分页布局和数据表中的双图标以及 bootstrap 集成

Question

当我将 Datatables 与 Bootstrap

集成时，我正在尝试解决一些形状问题

待考虑：我不使用任何CDN。所有外部文件都手动导入到我的项目中。

问题 1：双图标

我在 DataTable 排序区域同时看到 JQuery 和 Bootstrap 图标。我可以修复此问题，从我的项目中删除以下图像：

但是，如果我这样做，这将在开发人员控制台中触发一个错误，告知这些文件丢失。我只想要 bootstrap 个。

问题 2：分页

分页图标彼此不相邻我想要类似下图的内容：

问题 3：对齐

header 标签与行标签不对齐。行有点靠左。为什么？

我创建了这个 jsfiddle 供您参考

这就是我初始化 DT 的方式

jQuery(document).ready(function() {
    jQuery('#table').DataTable( {
        renderer: "bootstrap"
    } );
});

谢谢

Answer 1

尝试从外部库中删除 jquery.dataTables.min.css。似乎这个库覆盖了 bootstrap 类。请参阅示例 here

Weid Pagination layout and double icons in datatables and bootstrap integration