jquery-datatables-rails排序箭头未显示在开发环境中

Question

我有一个新的rails安装。我完全按照本页上的说明进行操作：https://github.com/rweng/jquery-datatables-rails

当我尝试查看数据表时，我收到了以下错误：

GET http://localhost:3000/images/sort_both.png 404 (Not Found)
GET http://localhost:3000/images/sort_asc.png 404 (Not Found)

在config/environments/development.rb我尝试更改以下设置：

config.assets.debug = false #and also tried true
config.serve_static_assets = true #and also tried false
config.assets.enabled = true

我也尝试过rake assets:precompile

不确定我在这里缺少什么。任何帮助将不胜感激。

Answer 1

也许有人会提出更好的答案。这就是我修复它的方法。

我摆脱了宝石。从datatables website下载了javascript和css文件：

• jquery.dataTables.min.css
• jquery.dataTables.min.js

将这些文件分别放在vendor/assets/stylesheets和vendor/assets/javascripts中。

我下载了missing images from here并将其粘贴在我创建的vendor/assets/images文件夹中。

我对jquery.dataTables.min.css中的文字进行了全部替换，并将“/ images /”替换为“/ assets /”

并修复了它。希望这有助于某人。

Answer 2

我遇到了同样的问题并使用不同版本的jquery.dataTables.min.css文件修复了它，其中图像被写为字符串而不是文件的引用。

Answer 3

对我来说，它只是通过更改以下内容而起作用：

background:url('../images/sort_desc.png')
background:url('../images/sort_asc.png')

到

background:url('/assets/sort_desc.png')
background:url('/assets/sort_asc.png')

注意：请确保将图像添加到资产/图像文件夹

Answer 4

我可以找到一个解决方案，只需在ui解决方案的images文件夹中添加2个纯白色背景.png图片，并将其另存为

sort_both.png ans sort_asc.png

基本上，此图像被设置为数据表标题的背景

Answer 5

我遇到了同样的问题，这就是我解决的问题

<style>
    table.dataTable thead .sorting {
        background: url("/Content/DataTables/images/sort_both.png") no-repeat center right;
         } 
    table.dataTable thead .sorting_asc {
        background: url("/Content/DataTables/images/sort_asc.png") no-repeat center right;
        }
    table.dataTable thead .sorting_desc {
        background: url("/Content/DataTables/images/sort_desc.png") no-repeat center right;
       }
</style>

这只是快速修复，无需更改提供的文件中的任何内容。 不要忘记相应地更改
[/ Content / DataTables / images /]

Answer 6

1.从这里下载图像：

https://cdnjs.com/libraries/datatables

2.在资产中创建数据表文件夹并将图像放入其中

3.在 style.scss 或 style.css 中添加以下代码：

table.dataTable thead .sorting {
    background-image: url("./assets/datatable/sort_both.png");
}

table.dataTable thead .sorting_asc {
    background-image: url("./assets/datatable/sort_asc.png") !important;
}

table.dataTable thead .sorting_desc {
    background-image: url("./assets/datatable/sort_desc.png") !important;
}

table.dataTable thead .sorting_asc_disabled {
    background-image: url("./assets/datatable/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled {
    background-image: url("./assets/datatable/sort_desc_disabled.png");
}