web-dev-qa-db-fra.com

Possibilité de masquer et d'afficher les lignes en fonction d'un événement de clic de bouton

J'ai donc ce datatable qui est généré par php dynamiquement une fois. Mais une fois que c'est chargé, je ne veux pas recharger toute la table car il n'y a qu'une petite déclaration javascript si je fais. Lorsque vous appuyez sur le bouton, je compare un attribut de données qui est sur mon tr. Si ça ne va pas, j'aimerais les cacher, sinon, je voudrais leur montrer. Alors voici ce que j'ai essayé jusqu'à présent.

HTML

    <div style="margin: 30px 0;">
        <button class="btn btn-primary" id="myClientButton">Voir mes clients seulements</button>
    </div>
    <table id="advancedSearchTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Subject</th>
                <th>Date</th>
                <th>Profile</th>
            </tr>
        </thead>
        <tbody>
            {% for entity in entities %}
                <tr data-user="{{ entity.user.id }}" class="values">
                    <td>{{ entity }}</td>
                    <td>{{ entity.mainphone }}</td>
                    <td>{{ entity.email }}</td>
                    <td>{{ entity.tagline }}</td>
                    <td>{{ entity.createdDate|date('d-m-Y') }}</td>
                    <td><a href="{{ path('clients_show', {id: entity.id}) }}" class="btn btn-success"><span class="glyphicon glyphicon-eye-open"></span></a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

La boucle est créée dans Symfony 2 (Utiliser Twig Template, si vous ne le comprenez pas, cela n'a pas d'importance), vous devez simplement comprendre que l'attribut sur "data-user" est créé par PHP et que chaque entrée de ma base de données va dans cette boucle.

Ensuite, dans jQuery, j'ai ceci:

<script>
$('#advancedSearchTable').DataTable(
    {
        "language": {
              "url": "//cdn.datatables.net/plug-   ins/9dcbecd42ad/i18n/French.json"
                    },
               responsive: true
            });
  $('#myClientButton').on('click', function(){
    if ($(this).hasClass('active')){
        $(this).removeClass('active');
        $('tr.values').show();
    }
    else{
        $(this).addClass('active');
        $('tr.values').each(function(){
            if ($(this).attr('data-user') != 5){
                $(this).hide();
            }
        });
    }
});
</script>

Il fonctionne très bien. Le seul problème est que le DataTable n'est alors pas "se remplacer". Ainsi, par exemple, s'il contient 25 pages, il en conserve 25 et lorsque vous appuyez sur le bouton "page suivante", la page "tableau" est actualisée et les éléments ne sont plus masqués. J'ai cherché beaucoup mais je ne pouvais pas trouver un moyen. Je ne veux vraiment pas utiliser ajax pour cela, car il suffit de remplir une fois avec valeur et ensuite il ne restera plus qu'à cacher ou afficher en fonction du bouton actif ou non ... Est-il même possible d'utiliser ce jQuery? brancher ?

Merci d'avance.

javascriptjqueryhtmlsymfonydatatables
14
Yann Chabot

Oui, c'est effectivement possible, mais vous aurez besoin d'une approche différente. Cacher des lignes avec jQuery et non via dataTables est généralement une mauvaise idée, car dataTables n'est pas informé des modifications apportées à l'élément <table> d'origine dans DOM. Les dataTables ne peuvent pas être raccordées à un événement "quelque part dans le code - un autre script-a-caché-une-ligne". C’est pourquoi dataTables semble "oublier" les modifications, il n’est tout simplement pas conscient de ces modifications et les composants internes de dataTables restent intacts. 

Utilisez donc plutôt un filtre custom . Le petit morceau de code suivant fait ce que vous voulez - il cache toutes les lignes ayant un attribut data-user différent de 5. Cela fonctionne à travers le tri et la pagination. Le dernier morceau de code est un exemple de bouton de réinitialisation.

$("#hide").click(function() {
    $.fn.dataTable.ext.search.Push(
       function(settings, data, dataIndex) {
          return $(table.row(dataIndex).node()).attr('data-user') == 5;
       }
    );
    table.draw();
});    
$("#reset").click(function() {
    $.fn.dataTable.ext.search.pop();
    table.draw();
});

démo -> http://jsfiddle.net/d5hre2ux/

30
davidkonrad

Selon ce https://datatables.net/examples/plug-ins/range_filtering.html il est possible d'utiliser le paramètre data pour filtrer en fonction de la valeur indiquée dans le tableau.

$("button").click(function() {
    $.fn.dataTable.ext.search.Push(
      function(settings, data, dataIndex) {
          return data[3] != "63";
        }
    );
    table.draw();
});
0
fgfernandez0321