列フィルターのドロップダウンと複数のチェックボックスを選択したデータテーブル

Question

Joao vitor retamero-フィドルからこの素晴らしいコードを見つけました- https://jsfiddle.net/jvretamero/bv6g0r64/ jquery datatable列フィルター。ただし、フィルターコンテナーをドロップダウンに変換し、コンテナー内の各アイテムをチェックボックスにする必要があります。はい、私は数時間の研究で見つけたように、これには多くの参照があります。しかし、jqueryプラグインで可能だと多くの人が言っているにもかかわらず、私はまだ例やこれを行う方法の明確な説明を見つけていません。誰でも例を挙げることができますか？どうすれば始められるのかわからない。どうもありがとう。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>

    $(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select multiple="multiple"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var vals = $('option:selected', this).map(function (index, element) {
                            return $.fn.dataTable.util.escapeRegex($(element).val());
                        }).toArray().join('|');

                        column
                            .search( vals.length > 0 ? '^('+vals+')$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Answer 1

追加のJS/jQueryライブラリを使用しない、これを試してください。

// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
$(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column));
  }

  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var ddmenu = cbDropdown($(column.header()))
          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {
              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            // Highlight the current filter if selected.
            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });
    }
  });
});

[〜＃〜] css [〜＃〜]

/* Styles for the drop-down. Feel free to change the styles to suit your website. :-) */

.cb-dropdown-wrap {
  max-height: 80px; /* At most, around 3/4 visible items. */
  position: relative;
  height: 19px;
}

.cb-dropdown,
.cb-dropdown li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cb-dropdown {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #888;
}

/* For selected filter. */
.active .cb-dropdown {
  background: pink;
}

.cb-dropdown-wrap:hover .cb-dropdown {
  height: 80px;
  overflow: auto;
  transition: 0.2s height ease-in-out;
}

/* For selected items. */
.cb-dropdown li.active {
  background: #ff0;
}

.cb-dropdown li label {
  display: block;
  position: relative;
  cursor: pointer;
  line-height: 19px; /* Match height of .cb-dropdown-wrap */
}

.cb-dropdown li label > input {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
}

.cb-dropdown li label > span {
  display: block;
  margin-left: 3px;
  margin-right: 20px; /* At least, width of the checkbox. */
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: normal;
  text-align: left;
}

/* This fixes the vertical aligning of the sorting icon. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-position: 100% 10px;
}

デモ

https://jsfiddle.net/41vgefnf/1/
https://jsfiddle.net/41vgefnf/6/
https://jsfiddle.net/41vgefnf/8/
https://jsfiddle.net/41vgefnf/9/
https://jsfiddle.net/41vgefnf/10/

[〜＃〜] update [〜＃〜]

フィルタードロップダウンをヘッダーに移動し、ドロップダウンメニューのようにドロップダウンのスタイルを設定しました。 （ドロップダウン機能に関与するJSまたはjQueryはありません;基本アニメーションを備えた純粋なCSS — CSS3 transition。）

更新＃2

申し訳ありませんが、CSS「アクティブ」classを選択したアイテムに適用するのを忘れました。

更新＃3

Update＃2の場合と同様ですが、ドロップダウンメニューラッパー用です。 （物事を忘れ続けるために申し訳ありません。そして私はあなたが実際に要求した要件/変更に適合する/満たすためだけに編集しました。） しかし、私はこの更新が最終改訂になると思います。）

更新＃4

ドロップダウンメニューラッパーの「アクティブ」状態の変更を修正しました。

[〜＃〜] credits [〜＃〜]

Fiddle について@Giacomoに感謝します。 =）

Answer 2

ユーザーインターフェイスの用語で検索しているのは、複数選択だと思います。

実際には、チェックボックスを使用した複数選択を伴うドロップダウン要素は存在しません（この種の相互作用の必要性のために複数選択が既に存在します）。

ユーザーエクスペリエンスが向上したカスタムマルチセレクトが必要だと思います（提供されている例のようなデフォルトではありません）。

ここに私の目的のフィドルがあります、これはあなたが求めていたものではないことを理解していますが、これはあなたの要求をより抽象的なレベルで適合させると思います。

私がやったことは、select2と呼ばれるjqueryプラグインを使用して、さまざまな入力要素のuxとuiを強化することです。

技術については、コードのコメントを確認してください。

https://jsfiddle.net/p1261jby/3/

/*added as resources
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css
*/

$(document).ready(function() {
  $('#example').DataTable({
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        //added class "mymsel"
        var select = $('<select class="mymsel" multiple="multiple"><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var vals = $('option:selected', this).map(function(index, element) {
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
      //select2 init for .mymsel class
      $(".mymsel").select2();
    }
  });
});

いくつかのパラメーターをカスタマイズする必要がある場合のSelect2のドキュメントを次に示します。 https://select2.org/selections

Answer 3

別のフレーバーがあります。 Elmahdi Mahmoud の修正されたコードを複数選択に使用しているため、彼のMIT著作権メッセージを残しました。

ここで警告しますが、コードはきれいではありませんが、結果は効果的であるため、オプションの山に追加する価値があると思いました。ライブフィドルは here です。

JSは

    /* Plugin API method to determine is a column is sortable */
$.fn.dataTable.Api.register('column().searchable()', function() {
  var ctx = this.context[0];
  return ctx.aoColumns[this[0]].bSearchable;
});


$(document).ready(function() {
  // Create the DataTable
  var table = $('#example').DataTable({
    fixedHeader: true,
    pageLength: 25,
    orderCellsTop: true,
    columnDefs: [{
      searchable: false,
      targets: [0, 4]
    }],
  });

  // Add filtering
  table.columns().every(function() {
    if (this.searchable()) {
      var that = this;


      var myList = $('<ul/>');
      var myMulti = $('<div class="mutliSelect"/>');
      myList.appendTo(myMulti);

      var myDd = $('<dd/>');
      myMulti.appendTo(myDd);

      var myDropdown = $('<dl class="dropdown"/>');
      myDropdown.append('<dt><a href="#"><span class="hida">Select</span><p class="multiSel"></p></a></dt>');
      myDd.appendTo(myDropdown);

      myDropdown
        .appendTo(
          $('thead tr:eq(1) td').eq(this.index())
        )
        .on('change', function() {
          var vals = $(':checked', this).map(function(index, element) {
            return $.fn.dataTable.util.escapeRegex($(element).val());
          }).toArray().join('|');

          that
            .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
            .draw();
        });


      // Add data
      this
        .data()
        .sort()
        .unique()
        .each(function(d) {
          myList.append($('<li><input type="checkbox" value="' + d + '"/>' + d + '</option>'));
        });

    }
  });


  /*
    Dropdown with Multiple checkbox select with jQuery - May 27, 2013
    (c) 2013 @ElmahdiMahmoud
    license: https://www.opensource.org/licenses/mit-license.php
  */

  $(".dropdown dt a").on('click', function(e) {
    var dropdown = $(this).closest('.dropdown');
    dropdown.find('ul').slideToggle('fast');

    $('.dropdown').not(dropdown).find('ul').slideUp('fast');

  });

  $(".dropdown dd ul li a").on('click', function() {
    $(".dropdown dd ul").hide();
  });

  function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
  }

  $(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").slideUp('fast');

  });

  $('.multiSelect input[type="checkbox"]').on('click', function() {
    var title = $(this).closest('.multiSelect').find('input[type="checkbox"]').val(),
      title = $(this).val() + ",";

    if ($(this).is(':checked')) {
      var html = '<span title="' + title + '">' + title + '</span>';
      $('.multiSel').append(html);
      $(".hida").hide();
    } else {
      $('span[title="' + title + '"]').remove();
      var ret = $(".hida");
      $('.dropdown dt a').append(ret);

    }
  });


});