[ jQuery/Datatable ]: datatables not responsive, disable an input search

Question

I follow the example on the jQuery DataTables in order to make a datatable with select input search.

Here's my html code example:

<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>

So here's my javascript code for 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>' );
                });
            });
        }
    });
});

Like you can see, I change the language in french, and disable search for colums 5, because I don't want allow user to make a search based on this colum. So the language changement and the disable search on the column 5 work really good.

Why my datatables don't display correctly. It's not collapsing well with bootstrap responsive design? How can I disable a search from a column (no input text or select in my tfoot under a column?

How can I do it?

Thank you for the help.

Answer 1

Did you try to import the cdn mentionned 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

Answer 2

Like @Gab mentionned in his answer, you need to import the cdn of jQuery dataTables like this:

First you need to disable or remove datatables CSS you have in your folders, if you don't it does not match or display correctly your <table> .

Then import 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

Just in case, if you have any other data in your <table> , like an edit button, a link, you have to disable search on this column, if you don't your datatables will have some displaying problems.

Follow this ewample here in order to disable or don't display the search input in your <tfoot> you don't want.