2016-08-04 8 views
1

Ich stieß auf etwas, das ich dachte, war sehr seltsam bei der Installation der DataTables-Plugin in meiner App. Ich benutze Ruby auf Schienen 4.2.DataTables Sortier-Symbole werden nicht angezeigt, ohne CSS minimiert

Wenn ich nur die minimized oder nur die nicht-minified js und css jquery.dataTables Dateien in meinen Assets haben, werden die Sortiersymbole nicht richtig geladen.
Ich bekomme eine RoutingError (No route matches [GET] "/images/sort_desc.png"). Ich habe andere Leute gesehen, die diesen Fehler besprochen haben, aber ich habe keine gute Lösung dafür gesehen. Wenn ich den Pfad ändern, um die Bilder innerhalb jquery.dataTables.css oder die minimale Version der Datei abzurufen, bekomme ich immer noch den gleichen Fehler. Der Pfad in der Fehlermeldung ändert sich nicht!

Die seltsame Sache ist, wenn ich die min.css und regelmäßige js-Dateien verwende, werden die Sortiersymbole richtig geladen! Recap: jquery.dataTables.min.css & jquery.dataTables.js: WORKS

jquery.dataTables.css & jquery.dataTables.js: NOT

funktionierts

jquery.dataTables.min.css & jquery.dataTables.min.js: FUNKTIONIERT NICHT

jquery.dataTables.css & jquery.dataTables.min.js:

FUNKTIONIERT NICHT

ich setzen werde diese Dateien innerhalb vendor/assets/stylesheets, ../javascripts, ../images. Was ist hier los?

+0

Führen Sie dies im Produktionsmodus? Wenn ja, stellen Sie sicher, dass Sie Ihre Assets vorkompilieren. – siegy22

+0

Ich führe das gerade in der Entwicklung. Außerdem fügt rails standardmäßig Dateien in allen Verzeichnissen unter Vendor/Assets hinzu. Wenn ich 'Rails.application.config.assets.paths' in der Konsole ausführe, kann ich'/vendor/assets/images', '/ vendor/assets/stylesheets' und'/vendor/assets/javascripts' sehen hinzugefügt. – Kaitrono

+0

versuche 'image_tag (" sort_desc.png ")' in einer Ansicht. (normalerweise in DEV befinden sich die Assets unter '/ assets/image.png','/assets/javascript.js' etc. – siegy22

Antwort

0

Ich konnte dies herausfinden. Sie müssen URLs überschreiben, die in jquery.dataTables.css verwendet werden. Ich erstelle eine neue CSS-Datei auch innerhalb der Verkäufer/assets/Stylesheets und trat in den folgenden:

table.dataTable thead .sorting { 
    background-image: image-url("sort_both.png"); 
} 
table.dataTable thead .sorting_asc { 
    background-image: image-url("sort_asc.png"); 
} 
table.dataTable thead .sorting_desc { 
    background-image: image-url("sort_desc.png"); 
} 
table.dataTable thead .sorting_asc_disabled { 
    background-image: image-url("sort_asc_disabled.png"); 
} 
table.dataTable thead .sorting_desc_disabled { 
    background-image: image-url("sort_desc_disabled.png"); 
} 

Dies funktioniert vorausgesetzt, Sie platziert Ihre Bilder in Verkäufer/assets/images und Sie auch Ihre CSS-Überschreibungsdatei nach den Datentabellen importieren CSS wird importiert.