DataTables JQuery plugin et style de table Rails

Je viens juste de prendre Ruby for Rails la semaine dernière et je suppose que le pipeline d’actifs me pose quelques problèmes. Plus précisément, je souhaite remplacer le style par défaut de la table DataTables dans mon application Rails 4, mais la modification de custom.css.scss ne fait rien. Le style vient apparemment de dataTables / jquery.dataTables. Tout ce que j’essaie de faire, c’est de rayer le tableau de manière à ce que les lignes en alternance aient des couleurs d’arrière-plan différentes, comme suit:

tr.odd { background-color: pink; } tr.even { background-color: red; }

Où exactement ce fichier datatables.css est-il installé dans l’arborescence de mon application afin que je puisse le modifier ou le remplacer, ou s’il n’est pas local, où puis-je installer mon propre fichier personnalisé pour remplacer ses spécifications?

application.css:

 *= require_self *= require_tree . *= require jquery.ui.core *= require jquery.ui.theme *= require dataTables/jquery.dataTables

Remarque: Si je supprime l’exigence jquery.dataTables, mon custom.css.scss prend effet.

gemfile:

 # Use jquery as the JavaScript library gem 'jquery-rails' # JQuery UI gem 'jquery-ui-rails' # Datatables JQuery plugin gem 'jquery-datatables-rails', git: 'git://github.com/rweng/jquery-datatables-rails.git'

Modifier:

Remarque: j’ai essayé d’inclure une feuille de style appelée jquery.datatables.css sous .app / assets / datatables / jquery.dataTables.css, mais Rails l’ignore simplement. L’idée est venue de cet article , mais j’interprète mal ce que dit l’auteur ou cela ne fonctionne pas dans Rails 4.

Un peu plus de recherche et d’expérimentation et j’ai pu trouver la bonne réponse.

J’ai lu des informations sur le pipeline d’actifs de Ruby On Rails et j’ai commencé à comprendre que Sprockets recherchait tout ce que vous répertoriez dans votre fichier application.css dans ./app/assets et .app / public. L’astuce consiste à obtenir une copie de jquery.datatables.css de l’une des deux manières suivantes:

1) implémenter une table dataTables par défaut dans votre application RoR; voir la source dans votre navigateur; cliquez sur le lien jquery.datatables.css et copiez + collez dans votre éditeur; ou

2) téléchargez la dernière dissortingbution standard (non-rails) de DataTables et trouvez une copie de jquery.datatables.css sous DataTables-xxx / media / css / jquery.datatables.css.

Modifiez votre fichier application.css en remplaçant

 *= require dataTables/jquery.dataTables

avec

 *= require jquery.dataTables

Vous pouvez désormais modifier librement votre copie locale de jquery.datatables.css en fonction de vos besoins. Assurez-vous de l’enregistrer à l’un des deux emplacements dans lesquels Sprockets recherchera (./app/public ou .app / assets). Dans mon cas, j’ai constaté que placer mon fichier jquery.datatables.css personnalisé ici:

 .app/assets/datatables/jquery.datatables.css

d’accord avec cette ligne suivante dans mon fichier application.css :

 *= require jquery.dataTables

Il est impératif que l’emplacement de votre fichier CSS soit conforme à ce que vous spécifiez dans votre fichier application.css ou vous obtiendrez une page d’erreur désagréable lorsque Ruby on Rails ne trouvera pas l’actif spécifié. L’erreur que j’ai commise était de ne pas faire que application.css soit d’accord avec l’emplacement réel du fichier. Les sprockets trouveront également jquery.datatables.css si je le localise ici, avec les autres feuilles de style (à condition que la ligne appropriée soit utilisée dans application.css:

 .app/assets/stylesheets/jquery.datatables.css

Bien que l’utilisation du drapeau !important css m’ait initialement permis de réaliser ce que j’espérais, saupoudrer mon code avec le drapeau serait devenu ingérable, même à très court terme. En des heures de recherche, je n’ai jamais réussi à trouver un guide pour cette première étape très fondamentale dans la personnalisation de DataTables pour Ruby on Rails, je conserve donc mes recherches ici dans l’espoir de gagner du temps.

Je crois que le problème vient de l’ordre dans lequel vous avez besoin de vos avoirs. Vous devriez avoir besoin de votre custom.css.scss après jquery.dataTables . Essayez de changer votre application.css en:

 *= require_self *= require jquery.ui.core *= require jquery.ui.theme *= require dataTables/jquery.dataTables *= require_tree .

Comme vous pouvez le constater, nous utilisons require_tree . après le *= require dataTables/jquery.dataTables .

METTRE À JOUR:

Si cela ne fonctionne pas, je pense que votre css en aura des !important , comme ceci:

 tr.odd { background-color: pink !important; } tr.even { background-color: red !important; }