Bonjour,

Voila je travaille sur un projet Web pour une association qui organise un challenge Judo. Pour celà, j'utilise Cakephp avec le thème admin-lte. Je souhaite utiliser les datatables proposés avec les options de tri, de recherche et de pagination. J'ai suivi des tutos qui m'ont permis de mettre ça en place sur ma machine de développement sous Windows et ça fonctionne très bien. J'ai souhaité mettre ça en place sur un petit up avec une distribution Debian équipé d'un LAMP. Après beaucoup d'efforts et dans la douleur, j'ai fini par faire fonctionner tout ça. Néanmoins, mes datatables n'ont pas le même look que sur ma machine de dev. Toutes les lignes sont affichées, donc pas de pagination et j'ai une barre noire à la place de l'entête du tableau. Je ne sais tellement pas comment avancer là-dessus, que je ne vois pas quoi vous dire de plus pour vous aider à m'aider.

Ci-dessous, un exemple de code qui fonctionne sur ma machine de dev et pas sur ma Up.

<?php echo $this->Html->css('sygaj_theme'); ?>
<div class="box">
  <div class="box-header">
    <h3 class="box-title">Liste des candidats</h3> 
    <small><?php echo $this->Html->link('Ajouter un candidat', 
            array('controller' => 'candidats', 
                  'action' => 'add')); ?>
    </small>
  </div>
  <!-- /.box-header -->
  <div class="box-body col-xs-12">
    <table id="listCandidats" class="table table-bordered table-hover" role="grid">
        <thead>
          <tr role="row">
              <th class="col-xs-1">Id</th>
              <th class="col-xs-2">Nom</th>
              <th class="col-xs-2">Prénom</th>
              <th class="col-xs-1">Sexe</th>
              <th class="col-xs-1">Ceinture</th>
              <th class="col-xs-1">Poids</th>
              <th class="col-xs-3">Clubs</th>
              <th class="col-xs-1" style="text-align: center;">Suppression</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($candidats as $candidat): ?>
              <tr role="row">
                <td class="col-xs-1">
                  <?php echo $this->Html->link($candidat->id,array('action' => 'edit', $candidat->id)); ?>
                </td>
                <td class="col-xs-2"><?php echo $candidat->can_nom; ?></td>
                <td class="col-xs-2"><?php echo $candidat->can_prenom; ?></td>
                <td class="col-xs-1"><?php echo $candidat->can_sexe; ?></td>
                <td class="col-xs-1"><?php echo $candidat->can_ceinture; ?></td>
                <td class="col-xs-1"><?php echo $candidat->can_poids; ?></td>
                <td class="col-xs-3"><?php echo $candidat->club->clu_nom; ?></td>
                  <!-- <td class="col-xs-1"><span class="glyphicon glyphicon-trash glyphicon-large"/></td> -->
  <!--                 <td class="col-xs-1"><?php echo $this->Html->link('<i class="icon-align-left"></i>', 
                    array('controller' => 'links', 'action' => 'delete', $candidat->id), 
                    array('escape' => false)); ?>
                  </td> -->
                <td>
                  <?php echo $this->Html->link('<span class="glyphicon glyphicon-trash"></span> Supprimer',array('action' => 'delete', $candidat->id), array('class' => 'btn btn-default', 'escape' => false), 'Voulez-vous vraiment supprimer ce candidat ?'); ?>
                </td>
              </tr>
          <?php endforeach; ?>
        </tbody>
    </table>
  </div>
  <!-- /.box-body -->
</div>
<!-- /.box -->
<?php
$this->Html->css([
    'AdminLTE./plugins/datatables/dataTables.bootstrap',
  ],
  ['block' => 'css']);

$this->Html->script([
  'AdminLTE./plugins/datatables/jquery.dataTables.min',
  'AdminLTE./plugins/datatables/dataTables.bootstrap.min',
],
['block' => 'script']);
?>

<?php $this->start('scriptBotton'); ?>
<script>
  $(function () {
    $('#listCandidats').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>
<?php $this->end(); ?>

Pour illustrer mon problème, quelques copies d'écran, c'est plus parlant:
Téléchargement des copies d'écran

Merci pour votre aide.

5 réponses


Bonjour,
on dirait que tu as une feuille css qui se charge après et qui prend le pas sur la datatable.
peut-être vérifie aussi si toutes les css de la datatable se chargent bien...

Gustou
Auteur

Bonjour bebs et merci pour ton retour.
Au niveau du chargement des css, je n'ai pas d'erreur de chargement. Je pense que je les verrais via la fonction F12 de Chrome. Or, je n'ai pas d'erreur à ce niveau.
Voici l'ordre de chargement affiché sous Chrome:

  • bootstrap.min.css
  • font-awesome.min.css
  • ionicons.min.css
  • skin-blue.min.css
  • AdminLTE.min.css
  • dataTables.bootstrap.css
  • sygaj_themes.css
  • fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic
  • reset.css
  • toolbar.css

Le seul css maison est sygaj_theme.css. Les autres proviennent des frameworks et themes utilisés.
Ci-dessous, le contenu de sygaj_theme.css:

.glyphicon-large {
    width: 1em;
    display: block;
    top: 50%;
    margin: 0em auto 0px;
}

.input-group[class*="col-"] {
    float: left;
    padding-right: 0;
    padding-left: 0;
    margin-right: 10px;
}

.row {
    margin-left: 0px;
    margin-bottom: 10px
}

#mynetwork {
    width: 100%;
    height: 800px;
    border: 1px solid #444444;
    background-color: #dddddd;
}

Ce qui est surprenant, c'est que je développe cette interface sous Windows avec Wamp et tout fonctionne très bien. Le problème apparaît lorsque je passe sous Linux avec Lamp, la cible de production.

Une idée?

vérifie peut-être la casse des noms de fichiers... ...

reset.css doit etre charger en premier ou alors pas du tous car bootstrap charge deja un reset css par defaut

essaye de vider ton cache complètement et recharger la page