[jQuery/Datatable]: данные не реагируют, отключить входной поиск

Question

Я следую примеру на jQuery DataTables, чтобы сделать datatable с выбором входного поиска.

Вот мой HTML пример код:

<div class="jumbotron"> 
<table id="dataTables" class="display" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th>Référence</th> 
      <th>Activité(s)</th> 
      <th>Parc immobilier</th> 
      <th>Nom du Bâtiment</th> 
      <th>Ensemble</th> 
      <th></th> 
     </tr> 
     </thead> 
     <tfoot> 
     <tr> 
      <th>Référence</th> 
      <th>Activité(s)</th> 
      <th>Parc immobilier</th> 
      <th>Nom du Bâtiment</th> 
      <th>Ensemble</th> 
      <th></th> 
     </tr> 
     </tfoot> 
     <tbody> 
     {% for batiment in batiment %} 
      <tr> 
      <td>{{ batiment.referencebatiment }}</td> 
      <td> 
       {% for batiment in batiment.typesactivite %} 
       {{ batiment.type }} 
       <br> 
       {% endfor %} 
      </td> 
      <td>{{ batiment.ensembles.parcsimmobilier }}</td> 
      <td>{{ batiment.nom }}</td> 
      <td>{{ batiment.ensembles }}</td> 
      <td><a href=""><button class="btn btn-edit btn-xs sharp">Modifier</button></a></td> 
      </tr> 
     {% endfor %} 
     </tbody> 
     </table> 
    </div> 

Так вот мой Javascript код DataTables:

$(document).ready(function() { 
    $('#dataTables').DataTable({ 
     responsive: true, 
     //enlever la recherche sur une colone, ici la colone 2 et 4 => Office et Date. Attention 0 est une valeur, les colones commencent donc à partir de 0 
     "aoColumnDefs": [ 
     { "bSearchable": false, "aTargets": [ 5 ] }], 
     // 
     //langue française 
     "language": { 
      "sProcessing":  "Traitement en cours...", 
      "sSearch":   "Rechercher :", 
      "sLengthMenu":  "Afficher _MENU_ éléments", 
      "sInfo":   "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments", 
      "sInfoEmpty":  "Affichage de l'élement 0 à 0 sur 0 éléments", 
      "sInfoFiltered": "(filtré de _MAX_ éléments au total)", 
      "sInfoPostFix": "", 
      "sLoadingRecords": "Chargement en cours...", 
      "sZeroRecords": "Aucun élément à afficher", 
      "sEmptyTable":  "Aucune donnée disponible dans le tableau", 
      "oPaginate": { 
       "sFirst":  "Premier", 
       "sPrevious": "Précédent", 
       "sNext":  "Suivant", 
       "sLast":  "Dernier" 
      }, 
      "oAria": { 
       "sSortAscending": ": activer pour trier la colonne par ordre croissant", 
       "sSortDescending": ": activer pour trier la colonne par ordre décroissant" 
      } 
     }, 
     initComplete: function() { 
      var api = this.api(); 
      api.columns().indexes().flatten().each(function (i) { 
       var column = api.column(i); 
       var select = $('<select><option value=""></option></select>') 
        .appendTo($(column.footer()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex(
          $(this).val() 
         ); 
         column 
          .search(val ? '^'+val+'$' : '', true, false) 
          .draw(); 
        }); 
       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="'+d+'">'+d+'</option>'); 
       }); 
      }); 
     } 
    }); 
}); 

Как вы можете видеть, изменить язык на французском, и отключить поиск колонок 5, потому что я не хочу, чтобы пользователь мог выполнить поиск на основе этого столбца. Таким образом, изменение языка и отключение поиска в столбце 5 работают очень хорошо.

Почему мои данные не отображаются правильно. Он не разрушается с помощью бутстрап-отзывчивого дизайна? Как отключить поиск из колонки (без ввода text или select в моем tfoot под колонкой?

Как я могу это сделать?

Спасибо за помощь.

Answer 1

Как @Gab упоминалось в своем ответе, вам нужно импортировать КДС из JQuery DataTables так:

Сначала вам нужно отключить или удалить DataTables CSS вы в ваших папках, если вы этого не сделаете это не правильно или правильно отобразить ваш <table>.

Тогда импорт CDN: CSS: //cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css JS: //cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js

Только в том случае, если у вас есть какие-либо другие данные в вашем <table>, как кнопки редактирования, ссылки, вы должны отключить поиск по этому колонке , если у вас нет данных о ваших проблемах с отображением.

Следуйте этому ewample here, чтобы отключить или не отобразить поиск в вашем <tfoot>, который вы не хотите.

Answer 2

ли вы пытаетесь импорт КДС here упоминалось

CSS: //cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css

JS: //cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js