web-dev-qa-db-ja.com

ボタンクリックイベントに基づいてデータテーブルの行を非表示および表示

したがって、phpによって動的に1回生成されるこのデータテーブルがあります。しかし、一度ロードされると、テーブル全体をリロードしたくありません。なぜなら、私がやっていることは小さなjavascript ifステートメントだけだからです。ボタンを押すと、trにあるデータ属性を比較します。収まらない場合は非表示にし、それ以外の場合は表示します。これが私がこれまで試したことです。

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>

ループはSymfony 2で作成されます（Twigテンプレートを使用します。理解していない場合、それは実際には重要ではありません）理解する必要があるのは、 "data-user"の属性PHPによって作成され、私のデータベースのすべてのエントリがこのループに入っています。

次に、jQueryでこれを持っています：

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

とてもうまくいきます。唯一の問題は、DataTableが「自分自身を置き換える」ことではないということです。したがって、たとえば、25ページがある場合、25ページを保持し、「次のテーブルページ」ボタンを押すと、「テーブルページ」が更新され、物事は非表示になりません。私はたくさん検索しましたが、方法が見つかりませんでした。これにはajaxを使用したくありません。値を1回入力するだけで、アクティブまたは非アクティブのボタンに応じて非表示または表示するだけで済むためです。プラグイン？

前もって感謝します。

javascriptjqueryhtmlsymfonydatatables
17
Yann Chabot

はい、確かに可能ですが、別のアプローチが必要になります。 dataTablesはDOMの元の<table>要素に加えられた変更を認識しないため、dataTables自体ではなくjQueryで行を非表示にすることは一般的に悪い考えです。 「コード内の別のスクリプトが隠された行」イベントdataTablesがフックすることはできません。それが、dataTablesが変更を「忘れる」ように見える理由であり、単にそれらの変更を認識しておらず、dataTablesの内部はそのままです。

そのため、代わりに カスタムフィルター を使用します。次の小さなコードは、必要なことを行います。data-userとは異なる5属性を持つすべての行を非表示にします。並べ替えとページネーションにまたがって機能します。最後のコードは、リセットボタンの例です。

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

デモ->http://jsfiddle.net/d5hre2ux/

36
davidkonrad

これによると https://datatables.net/examples/plug-ins/range_filtering.htmldataパラメーターを使用して、表に表示されている任意の値でフィルタリングできます。

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