0

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&nbsp;:",
            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
            "sInfo":           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            "sInfoEmpty":      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            "sInfoPostFix":    "",
            "sLoadingRecords": "Chargement en cours...",
            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
            "oPaginate": {
                "sFirst":      "Premier",
                "sPrevious":   "Pr&eacute;c&eacute;dent",
                "sNext":       "Suivant",
                "sLast":       "Dernier"
            },
            "oAria": {
                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;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.

1
  • 1
    try to look at the doc here Commented Jan 25, 2015 at 17:29

2 Answers 2

1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Indeed, it matches well. In fact I have an edit button and some links which are no datas from my database (not dynamic datas so), I remove them and my datatables display correctly. I have to disable some inputs search in my <tfoot> table. Thank you for the 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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.