wake-up-neo.com

Datable zum Ausblenden und Anzeigen von Zeilen basierend auf einem Klickereignis

Ich habe also diese Datentabelle, die einmal dynamisch von PHP erzeugt wird. Aber sobald es geladen ist, möchte ich nicht die gesamte Tabelle neu laden, da es nur eine kleine Javascript-Anweisung gibt, die ich mache. Wenn Sie die Taste drücken, vergleiche ich ein Datenattribut, das sich auf meinem tr befindet. Wenn es nicht passt, möchte ich sie verstecken, sonst möchte ich sie zeigen. Also hier ist was ich bisher ausprobiert habe.

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>

Die Schleife wird in Symfony 2 erstellt (mit Twig Template, wenn Sie es nicht verstehen, spielt es keine Rolle). Sie müssen nur verstehen, dass das Attribut für "data-user" von PHP und erstellt wird dass jeder Eintrag meiner Datenbank in diese Schleife geht.

Dann habe ich in jQuery folgendes:

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

Es funktioniert sehr gut. Das einzige Problem ist, dass die DataTable dann nicht "sich selbst ersetzt". Wenn es beispielsweise 25 Seiten hat, bleiben 25 Seiten erhalten, und wenn Sie auf die Schaltfläche "Nächste Tabellenseite" klicken, wird die "Tabellenseite" aktualisiert, und die Elemente werden nicht mehr ausgeblendet. Ich suchte viel, fand aber keinen Weg. Ich möchte ajax wirklich nicht dafür verwenden, da es nur einmal mit Wert gefüllt werden muss und dann nur noch ein- oder ausgeblendet werden muss, je nachdem, ob der Button aktiv ist oder nicht Plugin?

Danke im Voraus.

14
Yann Chabot

Ja, es ist tatsächlich möglich, aber Sie brauchen einen anderen Ansatz. Das Ausblenden von Zeilen mit jQuery und nicht über dataTables selbst ist im Allgemeinen eine schlechte Idee, da dataTables Änderungen am ursprünglichen <table>-Element in DOM nicht kennt. Es gibt keine "irgendwo-in-Code-ein anderes-Skript-hat-hidden-a-row" -Event, in das sich dataTables einhaken können. Deshalb scheint es, dass dataTables Änderungen "vergisst", dass es diese Änderungen einfach nicht kennt, und die internen Daten von dataTables bleiben davon unberührt. 

Verwenden Sie also stattdessen einen custom-Filter . Der folgende kleine Code macht das, was Sie wollen: Alle Zeilen, deren data-user-Attribut sich von 5 unterscheidet, werden ausgeblendet. Es funktioniert über Sortierung und Paginierung hinweg. Der letzte Code ist ein Beispiel für eine Reset-Taste.

$("#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();
});

demo -> http://jsfiddle.net/d5hre2ux/

30
davidkonrad

Gemäß diesem https://datatables.net/examples/plug-ins/range_filtering.html ist es möglich, den Parameter data zum Filtern nach einem beliebigen Wert in der Tabelle zu verwenden.

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